javascript - 使播放按钮一次显示在悬停 1 个图像上

Question

您好，我正在尝试做到这一点，当有人将鼠标悬停在图像上时，播放按钮只会在该图像上出现，我对图像有一些不同的效果，所以我必须做到这一点，以便当我悬停一个类它也使用 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;
}

Answer 1

只是在做:

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

对删除类做同样的事情。

所以最后会是:

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