Jquery显示和隐藏冲突答案

【问题标题】：Jquery show and hide conflictingJquery显示和隐藏冲突
【发布时间】：2014-01-29 17:52:19
【问题描述】：

我创建了一些结合 css 的 Jquery 来执行以下操作

1) 将鼠标悬停在图像上时，图像会褪色并显示粉红色背景

2) 悬停时显示徽标

问题是，当我复制课程时，所有的标志都显示出来了

谁能帮忙。

$(".portfolio-home").hover(function () {
    $(this).find(".show-logo").show();
}, function () {
    $(this).find(".show-logo").hide();
})

【问题讨论】：

你可以在没有任何 jquery 的情况下使用 css 来做到这一点。

标签： jquery html css hover jquery-hover

【解决方案1】：

只是您的选择器上缺少li。否则它将在ul 中搜索所有具有show-logo 类的元素。

$(".portfolio-home li").hover(function () {
    $(this).find(".show-logo").show();
}, function () {
    $(this).find(".show-logo").hide();
})

演示：http://jsfiddle.net/BC4eY/1435/

【讨论】：

@JoshPowell 哈哈哈 :)

【解决方案2】：

您可以为此使用.on() 方法。

$(".portfolio-home").on( 'hover', 'li', function () {
    $(this).find(".show-logo").show();
}, function () {
    $(this).find(".show-logo").hide();
})

【讨论】：

【解决方案3】：

这里没有使用任何类型的 Jquery，只使用 CSS。不要想太多，它比你想象的要容易。有一个很棒的！

.portfolio-home ul li:hover{
background: grey;
opacity: 0.5;
}
ul.portfolio-home li:hover img.show-logo{
position: absolute;
display: block;
}

DEMO

【讨论】：