Javascript jQuery-元素正在闪烁

我的代码应该在鼠标悬停时隐藏元素

a

并显示元素

b

，唯一的问题是它在鼠标悬停时闪烁元素。 我检查了整个代码，对我来说它非常好，我不知道我在这里遗漏了什么

HTML

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

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

---

您可以在这里检查它，在加载脚本之前，它会在徽标位置出现几秒钟：

当您鼠标悬停时，元素会隐藏，这会触发鼠标悬停，它会显示元素，这会触发鼠标悬停。。。。这会无限期地重复

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

我还建议使用

mouseenter

和

mouseleave

，这样事件就不会从孩子身上冒出来

$（文档）.ready（函数（）{
$（.parent”）.on（“mouseenter mouseleave”，function（）{
$（“.el-b，.el-a”）.toggle（）；
});
});
.el-a{
宽度：352px；
高度：115像素
}
.el-b{
显示：无；
宽度：352px；
高度：115px；
}

我相信更新后的JSFIDLE工作正常

$(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函数将运行，然后重复到第一步，还有另一个选项（修改代码）可以帮助您更好地理解，但不应该使用它。您可以使用上述解决方案

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

});

当鼠标悬停时，元素会隐藏导致鼠标悬停的元素，该元素会显示导致鼠标悬停的元素。。。。您可以尝试将鼠标事件绑定到父级。然后我应该做什么……。请查看编辑。
$(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();
});

});

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

});