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();

});

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

悬停时淡出/分组

1 个答案: