网格，点击隐藏其他 div 的 html 内容

Question

我有一个显示悬停信息的网格。

点击后，我的列表内容会出现，然后它会淡出另一个 div。

我遇到的问题是单击我的列表之一，悬停出现在所有其他列表项中...这些悬停信息都不应该出现。

这是我正在使用的 jQuery：

$('ul.thumbs li').on('click', function(){
    $('ul.thumbs li').find('.description').css('opacity',0);
    $('ul.thumbs li').not(this).find('.description').css('opacity',1);
});

为了更好的理解，请找我的codepen：

http://codepen.io/anon/pen/rxBmYa

您会看到单击一个缩略图时，悬停效果会停留在另一个缩略图上。

如果有人有任何解决方案，那就太棒了:)

Answer 1

您使用not 选择器的方式有误。请参阅文档here。对于您的用例，您可以将前三行替换为以下内容：

$('ul.thumbs li').on('click', function(e){
   $('ul.thumbs li').find('.description').css('opacity',0);
   $(e.target).css('opacity',1);
});

在这种情况下，e 是作为参数传递的点击事件，e.target 给出了注册事件的目标元素。

工作笔是here