[英]jquery show and hide div over
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 谢谢
You could also separate your javascript from your HTML easily by doing something like this 您还可以通过执行以下操作轻松地将JavaScript与HTML分开
<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/ 这是一个小提琴: http : //jsfiddle.net/NThK2/
The .c_cover_1
div is empty. .c_cover_1
div为空。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.