Question

我正在使用这个jQuery：

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

使用一些文字链接在横幅列表顶部创建一个小型悬停。

基本上，jQuery删除正在执行description_content

的类display:none;

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

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');  

    });
});

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

2 个答案: