CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Austin
Austin

Reputation: 15

Using Mouseover event multiple times not working?

I am trying to do a hover effect on some text. When I mouse over it, I want the text to be displayed with a close box. When I hit the close box, I obviously want it to close until I mouse over it again and get it to display again.

I'm able to display the hover text once, but after closing it the first time, it won't come back. I'm not really sure what is wrong... any help would be greatly appreciated. I am new to jquery/javascript in general so I might be missing something very obvious!

<div class ="closethis" id="one">
   Text 
        <div id="two"> 
            <ul> Hover text <div class="close"></div> </ul>                
</div>

The above is the basic setup, here is my javascript:

$("#one").on("mouseover", function() {
  $("#two ul").addClass('permhover');
});

$('.closethis').hover(function(){
$(this).find('.close').animate({opacity:1},100)
    })                
    $('.close').click(function(){$(this).parent().fadeOut('slow');});

For the css setup and the jsfiddle, here: http://jsfiddle.net/mmrVU/65/ There is just a placeholder square right now for the close icon but it works.

Thank you!

Upvotes: 1

Views: 1268

Answers (3)

PSL
PSL

Reputation: 123739

It is css specificity. When you do fadeOut it adds an inline style of display:none to the element and even though you add the class it does not matter since inline style overrides the rule. Also generally it would be better to use mouseenter instead of mouseover since mouseover events bubble up (In the code just try using mouseover you will see that element just shows up when you move your mouse and even after close and when you are not hovering the text). Also note that you are adding permHover class on mouseover every time which is not needed since you are never removing them. Similarly you do not need to use animate as well as adding opacity does not make any difference in your case.

Try:

$("#one").on("mouseenter", function () {
    $("#two ul").fadeIn('slow');
});

Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

  1. The fadeOut() set the display to none but animate() doesn't change that so use fadeIn()
  2. Use mouseenter instead of hover because else the same function will get called on mouse leave also
  3. You need to use animate on the permhover element

Try

$('.closethis').mouseenter(function () {
    $(this).find('.permhover').stop(true, true).fadeIn()
})
$('.close').click(function () {
    $(this).closest('.permhover').stop(true, true).fadeOut('slow');
});

Demo: Fiddle

Upvotes: 1

Don Rhummy
Don Rhummy

Reputation: 25870

You're setting the opacity to 0 on close. You need to set it back to 100%.

Upvotes: 0

Related Questions