jquery - 选择具有相同类的所有元素

Question

我希望在悬停时突出显示页面上具有相同类的所有元素。

我到目前为止的代码：

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $(this).addClass('hover');
});
$('p.myclass').mouseout(function () {
    $(this).removeClass('hover');
});
});

我的简短示例：JSFiddle

目前它只突出显示我悬停的元素。但我希望它突出显示具有相同类的所有元素。这将如何完成？我并不特别是在 CSS3 还是 Jquery 中完成。

Answer 1

由于mouseover将事件处理程序单独附加到查询集合中的每个元素，this因此回调内部的值是您悬停的元素，而不是整个集合。代替this，使用选择器。

$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});

或者，您可以缓存您的集合并参考它以在效率方面适度节省：

var coll = $('p.myclass');
coll.mouseover(function () {
    coll.addClass('hover');
});

Answer 2

采用

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});
$('p.myclass').mouseout(function () {
    $('p.myclass').removeClass('hover');
});
});