悬停时淡化 Out/In Div

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) 来防止所有具有相同 class 名称的元素 .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();

});

Article about $(this)

基于 OP 问题的更新：

CSS:

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

将此添加到 css 文件的最后一行。 jsfiddle（只是为了过渡目的）

悬停时淡化 Out/In Div

Fade Out/In Divs On Hover

javascript

jquery

hide

show

effect