Question

Jquery代码：

$(".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。您拥有它的方式，每当<{em>你> mouseover元素时，您分配 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类，因此您可以将其用于样式，而不是直接应用background-color。但是，由你决定。

Answer 2

您附加了太多的mouseout处理程序。每次将鼠标移到menu_clickable上时，都会更改bacgkround，然后附加另一个mouseout事件。那太糟糕了。
您正在使用正常程序附加点击事件“live”和鼠标*。为什么？基本上如果你需要现场附着使用它，否则最好保持清晰（更好的性能）。
使用css类更改UI要容易得多。像

CSS

.menu_clickable { background-color: #FFF; /* default color */ }
.clicked { background-color: #FCC; /* color for clicked button */ }
.mouseover { background-color: #F00; /* color when hovered */ }

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

$(document).ready(function () {
    $(".menu_clickable")
        .mouseover(function () {
            var t = $(this);
            if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
                t.addClass('mouseover');
            }
        })
        .mouseout(function () {  // attach event here instead of inside mouse over
            $(this).removeClass('mouseover');
        });

    $(".menu_clickable").click(function () {
        var t = $(this);
        t.toggleClass("clicked");
        if (t.hasClass("clicked")) {
            t.removeClass('mouseover');
        } else {
            t.addClass('mouseover');
        }
    });
});

如果未点击按钮，则会产生悬停效果;单击时，它会保持#FCC直到再次单击。

Answer 3

因为mouseout事件会在单击后再次更改颜色。

Jquery mouseover更改背景颜色

3 个答案: