jQuery:将mouseover和mouseout与toggleClass结合使用

时间:2013-03-16 13:52:32

标签: jquery html css

我正在构建一个小型Web应用程序,其中包含一些可点击区域和一些不可点击区域。当用户的鼠标指针位于可点击区域上方时,该区域会突出显示并且指针会变为手形。我还有一些区域最初是不可点击的,然后一旦点击一个按钮就变成可点击的,反之亦然。我在这些方面使用toggleClass方法。但我似乎无法在这些特定领域使用mouseovermouseout方法。

当我点击按钮时,我希望在将指针悬停在Show Answer和Submit标签上时更改鼠标指针和背景颜色,再次点击,我想将它们恢复为默认状态。现在,我只能更改指针。

HTML

<div id="help" class="hover">Help</div>
<div id="switchplayer" class="hover">Switch to Two player</div>
<div id="showanswer">Show Answer</div>
<div id="submit">Submit</div>
<div id="start" class="hover">Start</div>

<button>Click me!</button>

的jQuery     $('button')。click(function(){     $( '#showanswer,#提交')toggleClass( '悬停')。     });

$('.hover').mouseover(function() {
   $(this).css('background-color','red'); 
}).mouseout(function() {
       $(this).css('background-color',''); 
});

CSS

div {
border:1px solid black;
}

.hover {
    cursor:pointer;
    cursor:hand;
}

2 个答案:

答案 0 :(得分:2)

你可以用这个简单的CSS来做到这一点:

.hover:hover {
    background-color: red;
}

http://jsfiddle.net/cT3M9/3/

然后它将按预期工作。

如果您需要使用javascript完成此任务,则应使用on委派事件:

$(document).on({
    mouseover: function() {
        $(this).css('background-color','red');
    },
    mouseout: function() {
        $(this).css('background-color', '');
    }
}, '.hover');

http://jsfiddle.net/cT3M9/6/

答案 1 :(得分:1)

正如dfsq所指出的,最简单的方法就是通过CSS。但是,代码无效的原因是mouseovermouseout方法仅适用于执行这些方法时具有hover的元素。事件处理者追溯性地附加到符合原始选择标准的新元素。要将事件处理程序代码应用于稍后获取该类的元素,请使用.on method的变体,如下所示:

$('body').on('mouseover', '.hover', function() {
    $(this).css('background-color','red'); 
}).on('mouseout', '.hover', function() {
    $(this).css('background-color',''); 
});