Question

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.

Answer 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);