Question

我有一个下拉菜单，当鼠标悬停在链接上时，子div显示。该脚本工作正常，但是当我将鼠标放入该子域时，父链接的背景不再像通常在盘旋时那样保持突出显示。我想这是#megamenu，我想用相关的div突出显示。以下是代码请帮助。

我的网站，到目前为止只有关于dke下拉列表，但它确实是我所说的...

http://www.nestudiosonline.com/test.php

HTML：

<ul id="menu">
        <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>

CSS

ul#menu
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul# menu li
{
    display:inline;
    position: relative;
    }

ul#menu div {
  display: none;
}

ul#menu li.mega div {
    position: absolute;
}

ul#menu li.hovering div {
  display: block;
}

#aboutdke
{
    display:block;
    color:#FFF;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    background-color:#000;
    margin:0;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    border:0px;
    width:910px;
    height:280px;
    float:left;
    position:absolute;
    z-index:99999;
    top:164px;
    left:140px;
}

a.links:link
{
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
}

a.links:visited 
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
    } 

/* mouse over link */

a.links:hover
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }   

/* selected link */

a.links:active
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }

jquery的：

Answer 1

你可以用css做到这一点。改变行

a.links:hover

为：

a.links:hover, .megamenu.hovering a.links

在topbanner_back.css。

基本上，你说的是当一个对象有一个'megamenu'和'hovering'类时，带有'links'类的标签应该看起来就像它们在盘旋时一样。

要添加什么jquery，以便将<li>的背景悬停在subitem（div）上时保持突出显示</li>

1 个答案: