jQuery - 元素闪烁

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

HTML

  

    

    1
    
    

    2
    

    

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

当鼠标悬停时,该元素会隐藏,这会触发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;
}

  
1
  
2