Jquery显示和隐藏冲突

Posted 2023-05-08

【中文标题】Jquery显示和隐藏冲突

【英文标题】：Jquery show and hide conflicting

【发布时间】：2014-01-29 17:52:19

【问题描述】：

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

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

2) 悬停时显示徽标

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

谁能帮忙。

请看Fiddle

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

【问题讨论】：

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

【参考方案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