javascript - jquery显示和隐藏div

Question

我尝试在图像上显示封面，为此我使用这个小代码：

<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>

这里的问题是，是的，在图像上显示封面，但同时隐藏封面和所有时间显示，隐藏，隐藏和显示.....，我想要当把光标放在上面时，显示封面，当我放鼠标出来隐藏封面，但没有得到这个，有什么想法吗？

谢谢

Answer 1

您还可以通过执行以下操作轻松地将您的 javascript 与 HTML 分开

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

你控制悬停动作

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

我使用的类名与您使用的不同，但概念就在那里。

这是一个小提琴：http: //jsfiddle.net/NThK2/

Answer 2

.c_cover_1div 为空。什么都不能显示。

<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>