Question

我想在鼠标上方将li的颜色更改为红色。并且在点击事件中也保持相同的颜色。我有以下列表，

<html>
  <body>
     <ul>
        <li>list1</li>
        <li>list2
            <ul>
               <li>sublist1</li>
               <li>sublist2</li>
               <li>sublist3</li>
               <li>sublist4</li>
            </ul>
         </li>
         <li>list3</li>
         <li>list4</li>
     </ul>
  </body>
</html>




list1
list2
  sublist1
  sublist2
  sublist3
  sublist4
list3
list4

如果我点击list1，它的颜色应该变成红色，同时如果我鼠标悬停在另一个列表上，它将显示为红色。它的默认颜色是黑色。

Answer 1

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    color:red;
}

Jquery的

$(function(){
     $('li').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('li').click(function(){
           $(this).addClass('highlight_stay');
      });
});

要在点击其他li时删除点击颜色，请将最后一项功能更改为：

$('li').click(function(){
     $(li).removeClass('highlight_stay');
     $(this).addClass('highlight_stay');
});

Answer 2

使用css：

li:hover {
    color:red;
}

不推荐这样做：

li:focus {
    color: red;
}

<强> JQuery的

$('li').click(function(){
    $(this).css('color','red');
});

Answer 3

鼠标悬停 - css

li:hover {
color: red;
}

如果你想让它变绿，只需点击 - css

li:active {
    color: green;
}

如果你想让它改变颜色并保持这种颜色--JQuery

$("li").click(function (){
    $(this).css("color","green")
});

但是你可以考虑在$("blah").addClass()上阅读，因为它可以帮助DOM更快地加载。在JQuery上直接使用css $(this).css("color","green")可以在项目变大时减慢速度

<li>的颜色使用jquery </li>在鼠标悬停和单击事件上进行更改

3 个答案: