我有4个li
元素,我希望在悬停时(mouseenter
,mouseleave
),每个人都会为所有选择的人改变背景颜色。
我使用此代码完成此工作:
<script>
$( document ).ready(function()
{
$('#center-group').children().on('mouseenter',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#980000');
});
$('#center-group').children().on('mouseleave',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#404040');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#4c4c4c');
});
});
</script>
现在我想要当选择(click event
)时,李的每个人都会改变背景颜色,而不是顶级活动!怎么办?请指导我......
答案 0 :(得分:0)
这个正确的代码:
$(document).on('mouseenter','#center-group li',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');;
});
$(document).on('mouseleave','#center-group li',function(){
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');
});
$(document).on('click','#center-group li',function(){
$(this).toggleClass('selected');
$(this).siblings().removeClass('selected');
$('#center-group').children('.selected').children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');