我想对响应式博客列表实现悬停效果 -
基本上我使用的是这个的样式版本 - http://startbootstrap.com/3-col-portfolio并且我想在将鼠标悬停在特定博客上时使用“阅读更多”按钮淡入灰色覆盖层,就像在这个快速模拟的图像中一样 -
我想我可以在博客 div 中将 div 放在另一个之上,并在悬停时淡入/淡出 -
<div class="col-md-4 portfolio-item">
<div style="background:#FFF;" class="top">
<a href="#project-link">
<img class="img-responsive" src="http://breadwinningmama.com/wp-content/uploads/2013/04/fitness-running-shoes_fe.jpg">
</a>
<h3><a href="#project-link">A Fitness Article</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna.. <a href="articleInfo.html">Read More</a></p>
</div>
<div style="background:#000; width:100px; height:100px;" class="cover">
read more
</div>
<div>
</div>
</div>
$(document).ready(function() {
$('.portfolio-item ').mouseenter(function() {
$('.top').fadeOut('slow', function() {
// Animation complete.
});
$('.cover').fadeIn('slow', function() {
// Animation complete.
});
}).mouseleave(function() {
$('.top').fadeIn('slow', function() {
// Animation complete.
});
$('.cover').fadeOut('slow', function() {
// Animation complete.
});
});
});
</script>
但由于它的响应性,我不确定如何让每个 div 填充所需的空间 - 或者这是否是实现我想要的效果的最佳方式。有什么建议吗?
最佳答案
使用你的代码,我认为你可以尝试这样的事情......
HTML
<div class="col-md-4 portfolio-item">
<div class="top">
<a href="#project-link">
<img class="img-responsive" src="http://breadwinningmama.com/wp-content/uploads/2013/04/fitness-running-shoes_fe.jpg">
</a>
<h3><a href="#project-link">A Fitness Article</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna...</p>
</div>
<div class="cover"><a href="articleInfo.html">Read More</a></div>
CSS
.portfolio-item{
position:relative;
}
.cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background:#444;
opacity: .4;
}
.portfolio-item:hover .cover{
display:block;
}
关于jquery - CSS/Jquery - 响应悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24205164/