jQuery/CSS 全局悬停而不是每个元素答案

【问题标题】：jQuery/CSS hovering globally rather than per elementjQuery/CSS 全局悬停而不是每个元素
【发布时间】：2015-01-08 01:16:24
【问题描述】：

我正在使用这个 jQuery：

$(document).ready(function() {     
    $('.trow1 img, .description').hover(function(){     
         $('.description p').removeClass('description_content'); 
    },     
    function(){    
        $('.description p').addClass('description_content');      
    });
});

在带有几个文本链接的横幅列表顶部创建一个小的悬停。

基本上，jQuery 删除了正在执行 display:none; 的类 description_content

问题是当我将鼠标悬停在一张图片上时，每张图片的悬停都会立即出现，我希望它一次只悬停一张。

http://jsfiddle.net/omouqh37/2/

【问题讨论】：

我找不到带有悬停效果的图像。它们是否隐藏在登录后？
糟糕。我没有链接到它。这是toplist页面..我在jsfiddle中更改了它
显示您的脚本在问题中引用的 html。我们不应该尝试在演示中的 iframe 中查找代码。问题应该是自包含的

标签： jquery css image hover

【解决方案1】：

尝试改变

$('.description p').removeClass('description_content');

到

$(this).parent().find('.description p').removeClass('description_content');

这里应该够了：

http://jsfiddle.net/tLp5409f/

阅读这些：

http://api.jquery.com/parent/

http://api.jquery.com/find/

http://api.jquery.com/class-selector/

来自类选择器链接的重要概念 - 描述：选择具有给定类的所有元素。

要考虑的另一件事：您不需要 javascript，查看伪元素并使用 ::before 和 ::after，但请注意，这可能对 jquery 的支持较少，因此它可能不是更好的选择取决于您需要的跨平台程度

【讨论】：

尝试在你的小提琴中制作一个更孤立的案例，当我将鼠标悬停在图像上时，我根本看不到任何事情发生
如果在 jsfiddle 上运行 jquery 是不行的，你必须在新标签页中打开它，运行 jquery 然后悬停图像。

【解决方案2】：

感谢乔·萨格

$(document).ready(function() {     
    $('.trow1 img, .description').hover(function(){     
         $(this).parent().find('.description p').removeClass('description_content'); 
    },     
    function(){    
$(this).parent().find('.description p').addClass('description_content');  

    });
});

【讨论】：

这个答案与乔的不同吗？您可能应该删除它并选择他的答案（绿色复选标记）。