Jquery鼠标悬停改变背景颜色

Question

J查询代码:

$(".menu_clickable").mouseover(function() {
    $(this).css({'background-color' : '#F00'}).mouseout(function(){
        $(this).css({'background-color' : '#FFF'});
    });
});


$(".menu_clickable").live('click', function() {
    $(this).css({'background-color' : '#FCC'});
});

HTML 来源:

<div class="menu_clickable prof_info2" id="prof_info" >first</div>
<div class="menu_clickable prof_info3" id="prof_info" >second</div>
<div class="menu_clickable prof_info3" id="prof_info" >third</div>

我正在尝试使用 Jquery 制作悬停效果并且它工作正常但是如果我想在点击它时更改 DIV 背景颜色它不起作用，实际上点击的 DIV 改变背景颜色但它保持这样光标在上面。如果我将它移出，它会恢复原来的背景颜色。为什么？

Answer 1

首先，您确实没有正确使用 mouseout。按照您的方式，每当您将鼠标悬停在 元素上时，您就是在分配 mouseout 事件处理程序。

其次，您可能想要告诉 mouseout 在被单击时不要更改背景。类可以很方便地用于此目的。应该是这样的。

实例: http://jsfiddle.net/qNmZe/

$(".menu_clickable").mouseover(function() {
    $(this).css({'background-color' : '#F00'});
});

$(".menu_clickable").mouseout(function(){
    if(!$(this).hasClass('clicked'))
        $(this).css({'background-color' : '#FFF'}); 
});


$(".menu_clickable").live('click', function() { 
    $(this).css({'background-color' : '#FCC'})
            .addClass('clicked');
});

编辑:事实上，由于您正在为元素分配一个 clicked 类，您可以只将它用于您的样式而不是直接应用 背景色。不过，由您决定。