1

我正在努力做到这一点，以便我可以使用这样的菜单

公平地说，我几乎不明白这一点，我被告知您可以使用带有悬停功能的样式。

这是我用我的代码尝试过的：

<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的代码的预制链接

4

3 回答 3

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;
}
于 2013-04-05T11:36:50.677 回答
0

你需要在这里使用一些 jQuery 来制作 if 工作：

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

这里的工作示例

于 2013-04-05T11:45:57.353 回答
0

为此，您需要更改 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 文件

于 2013-04-05T13:15:37.780 回答