悬停渐隐/渐进

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 （仅用于过渡目的）