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：hover + .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

CSS将鼠标悬停在图像上以显示子菜单

3 个答案: