jQuery - 元素闪烁

Question

我的代码应该隐藏元素a并在鼠标悬停时显示元素b，唯一的问题是鼠标上的元素闪烁。 我检查了整个代码，对我来说这很好，我不知道我在这里缺少什么。

HTML

  <div class="parent">
    <div class="el-a">
    <a href="#" onMouseOver="clicksound.playclip()">1</a>
    </div>
    <div class="el-b">
    <a href="#">2</a>
    </div>

    </div>

CSS：

/* LOGO SUPERIOR */
.el-a {

     width:352px;
     height:115px}
.el-b {

     opacity: 0;
      width:352px;
     height:115px;
}

的Javascript

$(document).ready(function() {
    $(".el-b").hide();
    $(".el-a").on("mouseover", function() {
       $(".el-b").show();
       $(this).hide();
    }).on("mouseout", function() {
        $(".el-b").hide();
        $(this).show();
    });
});

http://jsfiddle.net/huy6yvdu/4/

编辑为@showdev建议，但现在第二个元素出现在页面上，直到加载脚本：

您可以在此处查看，在徽标位置，它会在加载脚本前显示几秒钟：http://lucrebem.com.br/blog/emponline/92-ferramentas-seo

Answer 1

当鼠标悬停时，该元素会隐藏，这会触发mouseout，它会显示触发鼠标悬停的元素....并且这会无限期地重复。

您可以尝试将鼠标事件绑定到始终可见的父项。

我还建议您使用mouseenter和mouseleave，这样事件就不会从孩子身上冒出来。

$(document).ready(function() {
  $(".parent").on("mouseenter mouseleave", function() {
    $(".el-b,.el-a").toggle();
  });
});

.el-a {
  width: 352px;
  height: 115px
}
.el-b {
  display: none;
  width: 352px;
  height: 115px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="el-a"><a href="#">1</a></div>
  <div class="el-b"><a href="#">2</a></div>
</div>

或者，使用jQuery的hover()方法：

$(document).ready(function() {
  $(".parent").hover(function() {
    $(".el-b,.el-a").toggle();
  });
});

.el-a {
  width: 352px;
  height: 115px
}
.el-b {
  display: none;
  width: 352px;
  height: 115px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="el-a"><a href="#">1</a></div>
  <div class="el-b"><a href="#">2</a></div>
</div>

Answer 2

这是a link更新的jsfiddle工作正常我相信。

$(document).ready(function() {

$(".el-b").hide();

$(".el-a").on("mouseover", function() {
   $(".el-b").show();
   $(this).hide();
});

$(".el-b").on("mouseout", function() {
   $(".el-a").show();
   $(this).hide();
});

});

问题是，只要你在el-a div上滚动它就被隐藏了，因此鼠标不再在其中，所以mouseout函数会运行然后重复回到第一步

Answer 3

还有另一个选项（修改您的代码）以帮助您理解，但不应使用它。您可以使用上述解决方案。

$(document).ready(function() {

$(".el-b").hide();
$(".el-a").on("mouseover", function() {
   $(".el-b").show();
   $(this).hide();
});
  $(".el-b").on("mouseleave", function(){
$(this).hide();
$(".el-a").show();
  });

});

http://jsfiddle.net/dL1ykccn/