jQuery - Element is blinking

My code is supposed to hide element a and display element b on mouse over, the only problem is that it is blinking the element on mouse over. I checked the whole code and for me it is perfectly fine, I don't know what I'm missing here.

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/

EDITED as @showdev suggested, but now the second element appears on page until the script is loaded:

You can check it here, at the logo positions, it appears for a few seconds before the script is loaded: http://lucrebem.com.br/blog/emponline/92-ferramentas-seo

Answers


The element hides when you mouseover, which triggers mouseout, which shows the element, which triggers mouseover.... and this repeats indefinitely.

You might try binding the mouse events to the parent, which is always visible.

I also suggest using mouseenter and mouseleave so that events do not bubble up from children.

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

Here's a link to an updated jsfiddle working correctly I believe.

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

});

The problem was that as soon as you scrolled over the el-a div it was being hidden, and thus the mouse was no longer in it and so the mouseout function would run and and then repeat back to the first step


There is another option (modify your code) to help you understand well but should not use it. You can use the solutions above.

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


Need Your Help

Can KNN be better than other classifiers?

classification svm random-forest knn

As Known, there are classifiers that have a training or a learning step, like SVM or Random Forest. On the other hand, KNN does not have.