jQuery：翻转主菜单时突出显示子菜单？

我有一个导航&辅助导航，两个始终显示....但希望我想要发生的是，当你在主导航中翻转“投资组合”...我想“辅助导航”来点亮例如申请一个新班级（具有amore可见的字体颜色）......这怎么可以做到这一点？jQuery：翻转主菜单时突出显示子菜单？

（当你滚下“组合”字体颜色回到正常的二次NAV）

<ul id="primarynav"> 
    <li><a href="">home</a></li> 
    <li class="portfolio"><a href="">protfolio</a></li> 
    <li><a href="">contact</a></li> 
</ul> 

<!-- Secondary nav --> 

<ul id="secondarynav"> 
    <li><a href="">Websites</a></li> 
    <li><a href="">Graphics</a></li> 
    <li><a href="">Drawing</a></li> 
</ul>

来源

2012-01-14 CodeyMonkey

这很奇怪你想达到什么。有一个已经可见的子菜单（实际上是你的#secundarynav），但悬停在主要 - 启发次要。顺便说一句：你有什么尝试？ – 2012-01-14 19:21:32

使用jQuery：

$(document).ready(function(){ 
    var $primarynav = $('#primarynav'), 
     $secondarynav = $('#secondarynav'); 

    $primarynav.hover(function(){ 
     $secondarynav.addClass('highlight'); 
    }, function(){ 
     $secondarynav.removeClass('highlight'); 
    }); 
});

来源

2012-01-14 19:59:50

确实喜欢jQuery的地方，谢谢。 – CodeyMonkey 2012-01-14 21:46:49

首先，告诉<li class="portfolio">一旦你悬停元素执行方法：

<li class="portfolio" onmouseover="highlightSecundarynav();">..</li>

然后写该方法highlightSecundarynav()将所述类添加到secundary NAV：

function highlightSecundarynav() { 
    document.getElementById("secondarynav").setAttribute("class", "highlight"); 
}

然后，您可以添加一些CSS规则来应用颜色或其他样式：

ul#secondarynav.highlight { 
    color: #FF0000; 
}

你必须这样做删除的亮点，一旦鼠标离开组合键：

<li class="portfolio" onmouseover="highlightSecundarynav();" onmouseout="unhighlightSecundarynav();">..</li>

的Javascript：

function unhighlightSecundarynav() { 
    document.getElementById("secondarynav").setAttribute("class", ""); 
}

来源

2012-01-14 19:23:09 Patrickdev

jQuery：翻转主菜单时突出显示子菜单？

回答

相关问题