2

Please view this example: http://jsfiddle.net/AAd9b/1/

Every time I hover over this object, the overlapping object opens twice, how do I make it so it only fades in one time and stays there until i mouseout everything? So it doesn't matter if you're over the background or foreground object.

Control Freak
  • 12,965
  • 30
  • 94
  • 145

1 Answers1

1

.hover() takes two arguments: handlerIn and handlerOut. If you supply only one callback, it's called on both events so you need to look at the event type to determine whether you fadeIn or fadeOut

http://api.jquery.com/hover/

You're probably looking for this:

$('.someclass').hover(
    function() {
        //-- mouseenter
    },
    function() {
        //-- mouseleave
    }
);

The reason your element flashes under the mouse is because it triggers the mouseleave event on the $('.someclass') (because, technically, the mouse did leave that object). This is a tricky scenario. Would probably involve unbinding and rebinding the events while the mouse is over your <p>... or some fancy CSS trickery.

Or try this: http://jsfiddle.net/UBdgz/

HTML:

<div class="wrapper">
    <div class="someclass">
        <a href="#">Hover Me</a>

    </div>
    <p>Only Once!</p>
</div>

JS:

var handleHover = function(evt) {
    switch (evt.type) {
        case 'mouseenter':
            $("p").fadeIn();
            break;
        case 'mouseleave':
            $("p").fadeOut();
            break;
    }
}
$(".wrapper").bind('mouseenter mouseleave', handleHover);
sesser
  • 1,155
  • 5
  • 12
  • interesting.. let me give it a try. – Control Freak Jun 07 '12 at 23:01
  • well, its the same idea, same results.. Unless you know how to read if the object is currently hovered or not.? – Control Freak Jun 07 '12 at 23:07
  • Updated... had to modify the HTML a little. – sesser Jun 07 '12 at 23:20
  • This seemed to work fine in the example, so I'll give you the best answer. Unfortunately wasn't for my code, due to the html structure constraints, so I used this post to help me with implementing the method i'm using now: http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery – Control Freak Jun 08 '12 at 00:44