jquery show and hide div over

Question

I try show cover over image , for this i use this little code :

<script>
function carrousel_show_cover(id)
{   
$(".c_cover_"+id).show(2000);   
}

function carrousel_hide_cover(id)
{   
$(".c_cover_"+id).hide(10);
}
</script>


 <div id="content_pic" onmouseover="carrousel_show_cover('1')" onmouseout="carrousel_hide_cover('1')">
<div class="c_cover_1" style="display:none;"></div>
<img src="test_image.jpg">
</div>

The problem here it´s , yes show cover over the image but the same time hide the cover and all time show , hide , hide and show ..... , i want when put cursor over , show the cover and when i put mouse out hide the cover , but no get this , some idea ?

Thank´s

Answer 1

You could also separate your javascript from your HTML easily by doing something like this

<div class="card-container">
    <img src="test_image.jpg" class="card"/>
    <div class="card cover"></div>
</div>

and you control the hover action with

$('.card-container').hover(function() {
    $('.card.cover', this).hide()
}, function() {
    $('.card.cover', this).show()
});

I used different class names than you did but the concept is there.

Here is a fiddle: http://jsfiddle.net/NThK2/

Answer 2

The .c_cover_1 div is empty. Nothing can be displayed.

<div id="content_pic" onmouseover="carrousel_show_cover('1')" onmouseout="carrousel_hide_cover('1')">
    <div class="c_cover_1" style="display:none;">
        <img src="cover_image.jpg" />
    </div>
    <img src="test_image.jpg">
</div>