CSS наведите курсор мыши на изображение, чтобы появиться подменю

Question

Я пытаюсь сделать так, чтобы я мог использовать меню как this

Чтобы быть справедливым, я едва понимал это, и я был информирован о том, что вы можете использовать стиль с функцией наведения.

Вот что я пытался с моим кодом:

<center> 
    <ul> 
     <li> 
      <a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></a> 
     </li> 
     <li> 
      <a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></a> 
      <img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" /> 
      <a href="audiorageAbout.aspx"><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></a> 
      <a href="audiorageCart.aspx"><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></a> 
     </li>      
    </ul> 
</center> 
<br /> 
<center> 
    <div class="showMe">I want this to show!!</div> 
</center> 

Вот CSS

.showMe 
{ 
display: none; 
} 
.showHim:hover .showMe 
{ 
display: block; 
} 

Вот готовое звено кода JSFIDDLE

Answer 1

Это не будет работать, потому что ваш display:block правило ищет .showHim, который парит с ребенком .showMe. Вы можете сделать это несколькими способами.

---

Ориентация скрытый ребенка: jsFiddle

CSS

.hoverme:hover .showMe { 
    display: block; 
} 

HTML

<span class="hoverme"> 
    <img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" /> 
    <span class="showMe">I want this to show!!</span> 
</span> 

---

Или ориентируется на родственногоjsFiddle

CSS

.showHim: парить + .showMe { дисплея: блок; }

HTML

<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" /> 
<span class="showMe">I want this to show!!</span> 

---

Типовое меню структурирована так, что делает его легко предназначаться скрытый элемент.jsFiddle

HTML

<ul class="menu"> 
    <li> 
     Some menu item 
     <ul class="submenu"> 
      <li>Sub menu item</li> 
     </ul> 
    </li> 
    ... 
</ul> 

CSS

.submenu { 
    display:none; 
} 
.menu > li:hover .submenu { 
    display:block; 
} 

Answer 2

Вы должны использовать некоторые JQuery здесь, чтобы сделать, если работа:

$(".showHim").hover(
     function() { 
     $('.showMe').css("display","block"); 
     }, 
     function() { 
     $('.showMe').css("display","none"); 
     } 
    ); 
    }); 

Here working example

Answer 3

для этого вам нужно изменить ваш HTML структура

HTML код

<center> 
    <ul> 
     <li><a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></a></li> 
     <li><a href="audiorageHome.aspx"><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></a></li> 
     <li class="showHim"><img src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" /> 
     <div class="showMe">I want this to show!!</div></li> 
     <li><a href="audiorageAbout.aspx"><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></a></li> 
     <li><a href="audiorageCart.aspx"><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></a></li>     
    </ul> 
</center> 

CSS код

.showMe{ 
    display: none; 
} 
.showHim:hover .showMe{ 
    display: block; 
} 

JsFiddle file