Question

我创建了一个带有hoverintent插件的大型下拉菜单，它的工作方式就像魅力一样，但是当我将鼠标放入细分时，li背景颜色不会保持黑色。我知道它可能是一个愚蠢的修复，但我无法弄清楚。请帮忙......

网站：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：

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[
    $(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu     
      function addMega(){
        $(this).addClass("hovering");
        }
//remove hovering class to li's inside of the unordermened with the id menu  
      function removeMega(){
        $(this).removeClass("hovering");
        }
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time 
    var megaConfig = {
         interval: 300,
         sensitivity: 4,
         over: addMega,
         timeout: 200,
         out: removeMega
    };
//make list items with the class megamenu have the hoverinter plugin excuted on them 
    $("li.megamenu").hoverIntent(megaConfig)


    });


    //]]>
    </script>

Answer 1

ul#menu li.hovering {
  background-color:#000;
}

因此，列表项本身将具有黑色背景，所有子元素 - 具有透明背景本身 - 也将具有该父项的黑色背景。

JQUERY＆amp; CSS DOWN MENU - 当鼠标悬停在subitem（div）时无法保持<li>的背景突出显示</li>

1 个答案: