CODEWITHSUNDEEP
javascriptjquery
ketysek
ketysek

Reputation: 1219

Jquery blinking trouble

I've got a following html structure:

<a class='support'>Podpořit</a>
<div class='fa'>
    <a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'></a>
    <a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'></a>
</div>

And this is my javascript code:

 $(".support").mouseover(function() {
        activeButton = $(this).next();
        activeButton.show();
        $(this).hide();
    });

    $(".support").mouseleave(function() {
        $(this).show();
        $(this).next().hide();
    });

I want to show the .fa div on .support hover and if I leave the area, I want to show .support back again. How can I do it? Now it's blinking :-(

Upvotes: 0

Views: 34

Answers (2)

Luka Govedič
Luka Govedič

Reputation: 524

$(function() {
  $(".support").mouseover(function() {
    $(this).children("div").show();
    $(this).children("a").hide();
  });

  $(".support").mouseleave(function() {
    $(this).children("div.fa").hide();
    $(this).children("a").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="support">
  <a>Podpořit</a> 
  <div class='fa' style="display:none">
    <a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'>Random content</a>
    <a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'>Random content</a>
  </div>
</div>

I added a container because you can't put a mouseleave event on an element you are hiding, because it will trigger as fast as it hides.

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Wrap it in a div and do like this,

 $(".containerDiv").mouseover(function() {
        activeButton = $(this).next();
        activeButton.show();
        $(this).find(".support").hide();
    });

    $(".containerDiv").mouseleave(function() {
        $(this).find(".support").show();
        $(this).next().hide();
    });

In your code your are hiding the element itself which in turn cause the mouse leave event to trigger.

Fiddle

Upvotes: 1

Related Questions