0

我到处搜索，但一切似乎都围绕着我所追求的，我自己还没有学到足够的知识来做这件事，如果它在某个地方或一个愚蠢的问题，我很抱歉。

这是我目前的结构如下：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="select"></li>

    <li><a href="#">Services</a></li>
    <li class="noselect"></li>

    <li><a href="#">Gallery</a></li>
    <li class="noselect"></li>

    <li><a href="#">About Us</a></li>
    <li class="noselect"></li>

    <li><a href="#">Contact Us</a></li>
    <li class="noselect"></li>
  </ul>
</nav>

我想要的是当一个链接悬停时，下面的“li”将它的类更改为“select”，而所有其他链接都设置为“noselect”。

我已经包含了一个 jsfiddle，所以你可以明白我的意思。（在这里找到）

在此先感谢，斯威夫特

4

4 回答 4

2

您可以在不使用 javascript 的情况下做到这一点。在普通的 CSS 中：

nav:hover .select {
    background:#ff0000;
}

nav li:not(.select):hover +  li {
    background:#000;
}

这是一个小提琴http://jsfiddle.net/2Ua2a/9/

但是，我可能会将其简化为：http: //jsfiddle.net/58gNm/2/ - 只是保持 html 更清洁。

于 2012-12-09T17:46:35.863 回答
1 
$('li a').on('mouseenter mouseleave', function() {
    $(this).closest('li').next('li').addClass('select')
           .siblings('li').removeClass('select');
});​

小提琴

您不必切换两个类，只需确保select该类具有比noselect该类更具体的选择器，它将覆盖它。

于 2012-12-09T17:30:47.837 回答
1

检查这个小提琴：

http://jsfiddle.net/BuddhiP/2Ua2a/6/

$(function() {
    $('a').on('hover', function() { $(this).parent().next('li').toggleClass('select noselect') }); 
});​
于 2012-12-09T17:35:38.100 回答
0

干得好：

$('a').on('hover', function(){
   var $parent = $(this).parent('li');

    $parent.siblings('li.select').removeClass('select').addClass('noselect');
    $parent.next('li').removeClass('noselect').addClass('select');
});​

代码很简单。悬停链接时，我运行一个函数。首先，我将父级声明li为变量，因为它更易于阅读并且性能稍好一些。

然后，我以当前具有.select-class 的兄弟姐妹为目标，并使其未选中。最后，我只是将类添加到紧随其后的li.

见小提琴：http: //jsfiddle.net/2Ua2a/5/

于 2012-12-09T17:38:43.423 回答