悬停时淡出/淡入 Divs答案

【问题标题】：Fade Out/In Divs On Hover悬停时淡出/淡入 Divs
【发布时间】：2017-12-12 10:48:36
【问题描述】：

请我想悬停在特定的 Div 上，当我这样做时，只是特定隐藏显示的一侧和另一个显示，但问题是所有 div 隐藏并同时显示。

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

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

【问题讨论】：

标签： javascript jquery hide show effect

【解决方案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（仅用于过渡目的）

【讨论】：

感谢兄弟，它工作了，但如果你不介意，它工作的时间，它不会正常淡入，请查看 codepen 链接并尝试看看我想要什么请朋友给你解释一下。
@Patrek 好的，请将此答案设置为其他查看者发现它有用的答案。
@Patrek 这就是 CSS 问题。您想要平滑淡入/淡出，对吗？
是的兄弟，如果你能帮帮我
@Patrek 检查新更新。您最常在 css 中添加新行，并在帖子中检查 jsfiddle。