在悬停jquery上显示图像上的div [英] Show div on image on hover jquery
本文介绍了在悬停jquery上显示图像上的div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
查看我的 jsfiddle
下面是示例js代码:
$(".box").hover(function () {
$(this).find('.box-hover').fadeIn(100);
$(".box-tresc").show();
},
function () {
$(this).find('.box-hover').fadeOut(100);
$(".box-tresc").hide();
});
我想要 box-tresc
div xxxxx内容显示在图像的中心。我尝试了 margin-top:-30px;
但它没有工作。
I want the box-tresc
div with "xxxxx" content to show in the center of the image. I tried margin-top:-30px;
but it didn't work.
推荐答案
UPDATED :
包含一个可能的解决方案(纯CSS)的小提琴:链接
Heres a fiddle containing a possible solution(pure CSS): link
CSS: b
.box-hover {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
width: 290px;
height: 185px;
margin: 5px 5px 0 5px;
opacity: 0;
color:transparent;
-webkit-transition: 0.4s;
transition: 0.4s;
line-height:185px;
text-align:center;
}
.box-hover:hover {
color:white;
opacity:1;
}
HTML: b
<div class="box">
<div class="box-hover">some text</div>
<div class="box-image">
<img src="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365" />
</div>
<div class="box-text">Theme 2.0
<br><span>Created by: <em>User</em></span>
</div>
</div>
这篇关于在悬停jquery上显示图像上的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文