懸停漸隱/漸進

Question

請我希望將鼠標懸停在特定的div上，當我這樣時，只是該特定隱藏了顯示的一側和其他的顯示，但是問題是所有的div同時隱藏和顯示。

$(".service").on('mouseover', function () {  
    $(".face1").fadeOut();
    $(".face2").fadeIn();
});
$(".service").on('mouseout', function () {
    $(".face2").fadeOut();
    $(".face1").fadeIn();
});

這是演示： https : //codepen.io/abcari/pen/JMjjow

Answer 1

您通常使用$(this)來防止具有相同類名.face1和.face2所有元素發揮相同的作用，並防止同一事件引起的影響。

jQuery的 ：

$(".service").on('mouseenter', function () {

    $(this).find(".face1").fadeOut();
    $(this).find(".face2").fadeIn();

});

$(".service").on('mouseleave', function () {

    $(this).find(".face2").fadeOut();
    $(this).find(".face1").fadeIn();

});

關於$（this）的文章

基於OP的更新問：

CSS ：

.service .face2 {position:absolute;top:50%;left:50%;display:none;transform:translate3d(-50%,-50%,0);text-align:center;}

在您的css文件的最后一行中添加此代碼。 jsfiddle （僅用於過渡目的）