Mouseover & mouseout triggers event continuously? [closed]

It's difficult to te开发者_如何学JAVAll what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

I have a nest div that I want to hide on mouse over, and show on mouse out.

However, when I try to do that, the events get triggered continously.

The code is quite long so, for more detailed e.g. Please check out the fiddle @ http://jsfiddle.net/jWbZy/16/

---

Here's a way to do it:

Add a wrapper around your carousel panel (i guess that's what cp stands for):

<div class="cpWrapper">
    <div class="cp">
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</div>

With the folowing style:

.cpWrapper {
    position: absolute;
    width: 100%; 
    height: 100%; 
}

And hide/show its child elements:

$('.slideshow .cpWrapper').mouseover(function() {
    $(this).find('.cp').hide();
});
// ...

Working example here: http://jsfiddle.net/Kxvuk/

---

That's because when you hide the element, mouseout event fires also as the cursor is no more on the element. Instead, add the event to the parent element to get the desired effect:

$('.slideshow')
    .mouseover(function(){
        $(this).find('.cp').hide();
    })
    .mouseout(function(){
        $(this).find('.cp').show();
    });