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;

的 class 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/

来自 class-选择器 link 的重要概念 - 描述：选择 all 具有给定 class.

还有一件事需要考虑：你不需要 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');  

    });
});

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

jQuery/CSS hovering globally rather than per element

css

jquery

image

hover