Question

我对jQuery有点新，我在实现功能方面遇到了困难所以我真的希望有人可以指导我一点。我基本上想要做的是同时突出显示2个元素（通过toggleClass）。

基本上我有一个重复的div（#post），其中包含一个标题，拇指和描述div。我想要做的是，一旦我将鼠标悬停在标题或拇指上，就可以获得一个新的附加类（xxxHover）。所以基本上一旦用户将鼠标悬停在标题/拇指div上，标题/拇指div（两者都）就会得到一个名为（xxxHover的新类，其中xxx代表div名称 - 在本例中为titleHover / thumbHover）

我可能不是最好的解释，所以我也准备了一个jsFiddle：

http://jsfiddle.net/yLqnd/12/

正如您所看到的，我的问题是仅限制当前元素的脚本（在我们的例子中是#post）。如果它有用或者我必须说它将被集成到WordPress网站（所以HTML结构基本上在loop.php中），这就是为什么我想限制每个项目的2x高亮效果（#post）

提前感谢工厂的任何想法！

Answer 1

http://jsfiddle.net/oscarj24/yLqnd/13/

Answer 2

这是一个更新的jsFiddle：而不是如此具体，任何div的内部现在将切换类

jsFiddle Link

基本上我把它们全部推到了一起：

$(".post div").mouseover(function(){  
    $(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).closest('.post').find('div').toggleClass('thumbHover');
});

Answer 3

我认为你可以通过在jQuery中使用.siblings（）来获得你正在寻找的效果。

$(".title").mouseover(function(){    
    $(this).toggleClass("titleHover");
    $(this).siblings(".thumb").toggleClass("thumbHover");
});

这会将toggleClass限制为仅存在于同一.post中的.thumb。

http://api.jquery.com/siblings/

Answer 4

简单，只需在两个元素的父元素上执行：

$(".post").mouseover(function(){  
    $(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).find('div').toggleClass('thumbHover');
});

在当前活动元素上触发多个jQuery脚本

4 个答案: