[英]Show div in Image hover?
我试图获得类似您在本示例中浏览图像时看到的效果的东西: link 。
当您将图像平移时,在图像上会显示一个div,将鼠标移出div后,该div将被隐藏。
图像尺寸为:920x300
我尝试没有运气:
$('.my-img').hover(function(){
$('.my-div').animate({left: '0px'}, 1000)
}, function(){
$('.my-div').animate({left: '-920px'}, 1000)
});
有关CSS和HTML的更多信息:
.my-wrapper{
position: relative;
}
.my-div{
position: absolute;
background: red;
height: 300px;
width: 920px;
left: -920px;
}
<div class="my-wrapper">
<div class="my-div">some text here</div>
<img ... /img>
</div>
为my-div添加一个容器
<div class="rel-wrap">
<img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
<div class="my-div">
Redbox
</div>
</div>
将位置设置为相对于容器
.rel-wrap {
position:relative;
width:920px;
height:300px;
border: solid 1px #ccc;
}
并将顶部和左侧应用于my-div
.my-div{
position: absolute;
background: red;
width: 920px;
height: 300px;
left: -940px; /*a little far left than the required block*/
top: 0px;
}
我在动画中添加了1秒的延迟(在回调之前)。
$(document).ready(function(e) {
$('.my-img').hover(function(){
$('.my-div').animate({left: '0px'}, 1000)
}, function(){
$('.my-div').delay( 1000).animate({left: '-940px'}, 1000)
});
});
代码: http : //jsfiddle.net/babumxx/Y4wC4/8/
预览:fiddle.jshell.net/babumxx/Y4wC4/8/show/
您也可以分为两个部分。 在mouseenter上显示,在mouseout上隐藏
$(document).ready(function(e) {
$('.my-img').mouseenter(function(){
$('.my-div').animate({left: '0px'}, 1000);
});
$('.my-img').mouseout(function(){
$('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
});
});
在这里提琴:jsfiddle.net/babumxx/Y4wC4/9/
由于您要保留该红色块,因此可以将鼠标移到该容器上,这将解决此问题。 -小提琴: http : //jsfiddle.net/babumxx/Y4wC4/10/
$(document).ready(function(e) {
$('.my-img').mouseenter(function(){
$('.my-div').animate({left: '0px'}, 1000);
});
//Trigger hide, when mouse leaves rel-wrap
$('.rel-wrap').mouseleave(function(){
$('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
});
});
希望这可以帮助。
像这样修改div CSS,然后重试:
.my-div { position: relative; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.