0

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

当我单击按钮时，我想更改鼠标指针以及将指针悬停在“显示答案”和“提交”选项卡上并再次单击时的背景颜色，我想将它们恢复为默认状态。现在，我只能改变指针。

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,#submit').toggleClass('hover'); });

$('.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;
}
4

2 回答 2

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/

于 2013-03-16T13:56:52.110 回答
1

正如 dfsq 指出的那样，最简单的方法就是通过 CSS。但是，您的代码不起作用的原因是mouseoverandmouseout方法仅在执行这些方法时hover应用于具有该类的元素。事件处理程序不会追溯附加到满足原始选择标准的新元素。要将您的事件处理程序代码应用于稍后获取该类的元素，请使用.on 方法的变体，如下所示：

$('body').on('mouseover', '.hover', function() {
    $(this).css('background-color','red'); 
}).on('mouseout', '.hover', function() {
    $(this).css('background-color',''); 
});
于 2013-03-16T14:05:39.710 回答