Mouseover & mouseout triggers event continuously?

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/

Solution

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();
});
// ...