asp.net - 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 规则正在寻找正在与 .showMe 的 child 一起悬停的 .showHim .您可以通过多种方式完成。

---

针对隐藏的 child :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>

---

或针对 sibling jsFiddle

CSS

.showHim:hover + .showMe { 显示: block ；

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;
}