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

嗨，我正在尝试制作，这样当有人将鼠标悬停在图片上时，播放按钮只会在该图片上打开，我对图片有一些不同的效果，所以我不得不制作它，以便当我将图片悬停在某个图片上时该类使用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;
}

最佳答案

只是做：

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

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

所以最终将是：

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