的颜色使用jquery在鼠标hover和单击事件上进行更改

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

  
 
list1
 
list2 
 
sublist1
 
sublist2
 
sublist3
 
sublist4
 
 
 
list3
 
list4
 
   list1 list2 sublist1 sublist2 sublist3 sublist4 list3 list4 

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

Answer 1

使用css：

 li:hover { color:red; } 

这不建议：

 li:focus { color: red; } 

JQuery的

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

Answer 2

 // 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 3

鼠标hover – 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") “直接”可以减慢项目变大的速度