CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

On hover display none, on mouse out display block

I have a div on my page, that is click and draggable.

Over this div, I have another that is absolutely position.

On hover of this div, I want it to fade out and dissapear so i can use the div beneath, I cant seem to get it working however. Is there a way to say on hover, display none, on mouse leave, display block?

Currently im using...

$('.overlay').hover(function() {
    $(this).stop(true).fadeTo("fast", 0);
}, function() {
    $(this).stop(true).fadeTo("fast", 0.3);
});

Upvotes: 0

Views: 2258

Answers (1)

Pow-Ian
Pow-Ian

Reputation: 3635

Use mouseover/mouseout:

Be sure the mouseout is on the underlay otherwise the animation will flicker because you faded out the overlay so you left it. also during your drag event you want to watch to see if you are leaving the overlay because you will want to probably remove the event handler for mouse out if you are no longer under it and replace it if you go back under it.

$('.overlay').mouseover(function(){
    $(this).fadeOut("fast");
});

$('.underlay').mouseout(function(){
    $('.overlay').fadeIn("fast");
});

here is a fiddle

Upvotes: 1

Related Questions