Question

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

我到目前为止的代码：

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

My brief example: 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');
});
});

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

2 个答案: