0

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

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

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

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

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

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

4

4 回答 4

0

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

于 2012-07-24T15:44:39.370 回答
0

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

jsFiddle 链接

基本上我把它们放在一起：

$(".post div").mouseover(function(){  
    $(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).closest('.post').find('div').toggleClass('thumbHover');
});
于 2012-07-24T15:45:40.187 回答
0

我认为您可以通过在 jQuery 中使用 .siblings() 来获得所需的效果。

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

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

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

于 2012-07-24T15:47:01.570 回答
0

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

$(".post").mouseover(function(){  
    $(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){    
    $(this).find('div').toggleClass('thumbHover');
});
于 2012-07-24T15:52:11.950 回答