javascript - 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 的建议进行编辑，但现在第二个元素出现在页面上，直到加载脚本:

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

Answer 1

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

您可以尝试将鼠标事件绑定(bind)到始终可见的父级。

我还建议使用 mouseenter 和 mouseleave 这样事件就不会从 child 那里冒出来。

$(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>