看看我的jsfiddle
这是示例js代码:
$(".box").hover(function () {
$(this).find('.box-hover').fadeIn(100);
$(".box-tresc").show();
},
function () {
$(this).find('.box-hover').fadeOut(100);
$(".box-tresc").hide();
});
我希望带有“xxxxx”内容的box-tresc
div 显示在图像的中心。我尝试了 margin-top:-30px;
但没有成功。
最佳答案
更新:
这是一个包含可能解决方案(纯 CSS)的 fiddle :link
CSS:
.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:
<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 - 在悬停jquery的图像上显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22965438/