2011-03-17 98 views
1

当我将鼠标悬停在列表项上而不是包含列表项时,我该如何做“某事”。当鼠标悬停在LI上时会做“某些事情”,但不会在包含LI的时候做“某些事情”

例如:

$('#mainnav li').hover(function() { 
    $(this).find('ul').stop(true,true).slideDown(100); 
    $(this).find('a:first').css({ 
     "background-image": 'url(/assets/images/nav_bg2.png)', 
     "color": '#fff', 
     "text-shadow" : '1px 1px 1px #000' 
    }); 

}, function() { 
    $(this).find('ul').stop(true,true).slideUp(100); 
    $(this).find('a:first').css({ 
     "background-image": 'none', 
     "color": '#630872', 
     "text-shadow" : '1px 1px 1px #fff' 
    }); 
}); 

样本HTML

<div id="mainnav"> 
<ul> 
    <li class="active nav-home"> 

     <a href="/">Home</a> 
     <ul> 
      <li><a href="/home/welcome">Welcome</a></li> 
      <li><a href="/home/latest-conveyance">Latest Conveyance</a></li> 
     </ul> 
    </li> 

    <li class="nav-who-we-are"> 

     <a href="/who-we-are">Who We Are</a> 
     <ul> 
      <li><a href="/who-we-are/history">History</a></li> 
      <li><a href="/who-we-are/culture">Culture</a></li> 
      <li><a href="who-we-are/people">People</a></li> 
      <li><a href="who-we-are/vision">Vision</a></li> 

     </ul> 
    </li> 


    <li class="nav-what-we-do"> 
     <a href="/what-we-do">What We Do</a> 
     <ul> 
      <li><a href="/what-we-do/services">Services</a></li> 
      <li><a href="/what-we-do/projects">Projects</a></li> 

      <li><a href="/what-we-do/portfolio">Portfolio</a></li> 
      <li><a href="/what-we-do/philanthropy">Philanthropy</a></li> 
     </ul> 

    </li> 

</ul> 
</div> 

这里的问题是,我想一些CSS应用到顶层列表项,而不是那些之下嵌套。当我将鼠标悬停在顶级列表项目内的列表项上时,该代码当前应用了CSS。这是否有意义?

顺便说一句,这是一个菜单,我想顶部的标签,以保持灯火通明,而我通过下拉

回答

1

如果我理解正确的问题,然后看看使用child selector

$('#mainnav>ul>li').hover(function() { 
1

滚动在你的选择更具体。尝试更改'#mainnav li''#mainnav>ul>li''#mainnav>ul>li>a'

0

最简单的事情将是确保CSS具体选择那些丽的,你确实想强调:

#mainnav > ul > li.classname { 
    /* css code here */ 
} 

因此,设置类名的JQuery和CSS选择器的组合只需选择那些与顶级域名相匹配的li元素,一旦设置了类名就可以做到这一点。

相关问题