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

只要做：

 class Money extends TYPO3\CMS\Extbase\DomainObject\AbstractEntity{ ... }

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

所以最终会是：

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

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

1 个答案: