Question

我到处都搜索过但是一切似乎都围绕着我所追求的东西，而我自己也没有学到足够的知识，所以如果它出现在某个地方或者是一个愚蠢的问题那就很抱歉。

这是我目前的结构：

<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，所以你可以看到我的意思。（找到here）

提前致谢，Swift

Answer 1

您可以在不使用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保持清洁。

Answer 2

$('li a').on('mouseenter mouseleave', function() {
    $(this).closest('li').next('li').addClass('select')
           .siblings('li').removeClass('select');
});

FIDDLE

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

Answer 3

检查这个小提琴：

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

$(function() {
    $('a').on('hover', function() { $(this).parent().next('li').toggleClass('select noselect') }); 
});

Answer 4

你走了：

$('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 - 类的兄弟，并将其取消选中。最后，我只是将该类添加到即时li。

请参阅小提琴：http://jsfiddle.net/2Ua2a/5/

在悬停时改变另一个div的类 - jQuery

4 个答案: