一次在悬停 1 个图像上显示播放按钮答案

【问题标题】：Make play button display on hover 1 image at a time一次在悬停 1 个图像上显示播放按钮
【发布时间】：2019-06-03 15:09:57
【问题描述】：

您好，我正在尝试这样做，所以当有人将鼠标悬停在图像上时，它会使播放按钮仅在该图像上出现，我对图像有一些不同的效果，所以我必须这样做，以便当我悬停一个类，它也使用java显示另一个类，唯一的问题是我有9个图像需要单独显示悬停时的播放按钮，但是当我将鼠标悬停在1个图像上时，它会立即在所有图像上显示播放图标,

有没有更简单的方法可以让播放图标仅在我将鼠标悬停在一张特定图片上时显示？

Javascript：

$(".portbg1").hover( function () {
$(this).addClass("active");
$(".playbutton").addClass("active");
}, function (){
$(this).removeClass("active");
$(".playbutton").removeClass("active");
});

HTML：

<div class="port_item"><div class="playbutton"></div><div 
class="portbg1"><div class="port_item_title" data-modal="#modalOne"> . 
<h4>Showreel</h4></div></div></div>

还有portbg2、portbg3、portbg4等……portbg9

CSS：

.playbutton {
   position: absolute;
   background-image: url(IMAGES/openicon.png);
   background-size: 80px 80px;
   background-repeat: no-repeat;
   background-position: center center;
   width: 80px;
   height: 80px;
   left: 50%;
   margin-left: auto;
   margin-right: auto;
   top: 50%;
   transform: translate(-50%,-50%);
   z-index: 1;
   opacity: 0;
   overflow: hidden;
   transition: all 0.2s;
}

.playbutton:hover {
   opacity: 1;
}

.active {
   opacity: 1;
}

【问题讨论】：

你甚至不需要为此使用 JS。只需使用 CSS :hover 伪类：应该可以满足您的需求。如果您确实需要使用 JS：您的代码无法按预期工作的原因是因为您在悬停任何单个项目时选择了 all 播放按钮。使用$(this).find(.playbutton) 将选择范围改为特定项目的嵌套播放按钮。
请转到 jsfiddle 并在那里对您的问题进行简单演示。它使我们更容易解决问题。
$(".playbutton") 是一个全局选择器。您必须使用上下文查找来找到相对于悬停图像的播放按钮。
是的，我需要它来查找并启用本地嵌套播放按钮到我悬停的 port_item 我只是不确定如何将查找嵌套播放按钮部分放入我的 java 代码中
$(this).closest('.port_item').find('.playbutton')

标签： javascript jquery html css

【解决方案1】：

只是在做：

$(this).siblings('.playbutton').addClass("active");

在删除类时做同样的事情。

所以最终会是：

$(this).addClass("active").siblings('.playbutton').addClass("active");

【讨论】：

非常感谢伙计，结合 Taplars，我可以在全局范围内为所有 port_item 使用代码 $(".port_item").hover( function () { $(this).closest('.port_item ').find('.playbutton').addClass("active"); }, function (){ $(this).closest('.port_item').find('.playbutton').removeClass("active" ); });