seo Question posted in
Some basic information to get you started with this can be found here.

jQuery – Element is blinking – SEO

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:
enter image description here

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

Tags:

3

Answers


  1. 0

    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>

    Alternatively, use jQuery’s hover() method:

    $(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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search