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

Question

我正在使用这个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/

Answer 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支持较少，所以它可能不是更好的选择，这取决于你需要它的跨平台程度。

Answer 2

谢谢 Joe Sager

$(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');  
    });
});