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_1 div为空。什么都不能显示。

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

jquery显示并隐藏div

2 个答案: