Question

我正在做些什么。 defualt select word是第一个li。

ul {
    list-style: none
}
.a-c {
    color: #c10603;
    cursor: pointer
}

<ul>
    <li class="a a-c">list1</li>
    <li class="a">list2</li>
    <li class="a">list3</li>
    <li class="a">list4</li>
    <li class="a">list5</li>
</ul>

当我点击另一个li时，默认值会改变。一些代码运作良好。

$('body').on('click','.a', function(){
    $('.a-c').removeClass('.a-c');
    $(this).addClass('.a-c')
});

现在我需要另一种效果，当鼠标悬停时，defaut li会将颜色变为黑色，而mouseenter会将颜色变为color:#c10603，某些代码也会起作用。

$('body').on('mouseenter','.a', function(){
    $(this).addClass('a-c')
});
$('body').on('mouseleave','.a', function(){
    $('.a').removeClass('a-c')
});

但是我还需要，如果将所有li留下，那么defult li仍会显示为#c10603

的颜色

这里的一些在线代码http://jsfiddle.net/3rvd8qwf/1/我的问题是，当我点击另一个li并将所有li分开时，defualt li应该变成我点击的那个，而不是第一个。感谢。

Answer 1

您的问题可以通过CSS单独处理;还有一个jQuery函数：

HTML：

<ul>
    <li class="active">List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

CSS：

li{
    font-size: 28px;
}

li.active{
    color: red;
}

ul:hover li{
    color: black;
}

li:hover{
    color: red !important;
}

jQuery的：

$(document).ready(function(){
    $("li").click(function(){
        $("li.active").removeClass("active");
        $(this).addClass("active");
    });
});

在这里查看小提琴：http://jsfiddle.net/mk779g3o/

Answer 2

您可以拥有仅限CSS的解决方案，因此不需要鼠标中心等：

ul:hover,
ul:hover .a-c {
    color: black;
}

点击功能（请注意，在使用addClass()或removeClass()时，您不需要使用类点：

$('.a').on('click', function() {

    $('.a').removeClass('a-c');
    $(this).addClass('a-c');

});

小提琴：http://jsfiddle.net/jmp6x8u9/

jquery click / mouseenter / mouseleave更改类

2 个答案: