CSS懸停在圖片上即可使子菜單出現

菜單爲了公平起見我幾乎沒有理解這一點，我被告知，你可以使用風格與懸停功能。

這就是我試圖用我的代碼：

<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

來源

2013-04-05 erichaaang

歡迎計算器！你可以閱讀一些常見問題：http://stackoverflow.com/faq。並且請考慮將有用的答案標記爲正確。 – 2013-04-05 12:03:16

預製的鏈接時，該不會是因爲工作您的display:block規則正在尋找與.showMe的孩子一起懸停的.showHim。你可以通過幾種方法做到這一點。

瞄準隱藏孩子：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; 
}

來源

2013-04-05 11:36:50

這裏需要使用一些jQuery來做出是否工作：

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

Here working example

來源

2013-04-05 11:45:57

爲此，你需要改變你的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

來源

2013-04-05 13:15:37

CSS懸停在圖片上即可使子菜單出現

回答

相關問題