1

我想在鼠标悬停时将 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，它的颜色应该变成红色，同时如果我将鼠标悬停在另一个列表上，它会显示为红色。它的默认颜色是黑色。

4

3 回答 3

4 
// 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');
});
于 2013-02-13T13:12:10.467 回答
3

为此使用 css：

li:hover {
    color:red;
}

不建议这样做：

li:focus {
    color: red;
}

jQuery

$('li').click(function(){
    $(this).css('color','red');
});
于 2013-02-13T13:14:54.823 回答
2

鼠标悬停 - 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")会减慢速度

于 2013-02-13T13:43:03.273 回答