< li>的颜色使用鼠标在鼠标悬停并单击事件上进行更改 [英] color of the <li> change in on mouse over and click event using jquery
本文介绍了< li>的颜色使用鼠标在鼠标悬停并单击事件上进行更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在鼠标悬停时将li的颜色更改为红色.并在点击事件中也保持相同的颜色.我有以下列表，
I want to change the color of the li as red on mouse over. And keep the same color in click event also. I have the following list,
<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，则其颜色应更改为红色，同时如果我将鼠标悬停在其他列表上，它将显示为红色.它的默认颜色是黑色.
If i click the list1, it color should be change into red, at the same time if i mouse over the other list it will be displayed as red. Its default color is black.
推荐答案
// 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时删除单击颜色，请将最后一个功能更改为:
To remove the click color when a different li is clicked change the last function to this:
$('li').click(function(){
$(li).removeClass('highlight_stay');
$(this).addClass('highlight_stay');
});
这篇关于< li>的颜色使用鼠标在鼠标悬停并单击事件上进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
