我正在尝试对 div 产生悬停效果,以便包含图像的 div 在悬停时向上移动。我希望“宝丽来”div 在悬停时向上移动。如果我只是将悬停类应用于 img 而不是整个 div,则此效果有效。请帮忙。 fiddle here
标记:
<div id="home-gal-col"> <span class="span-homegal">
<a href="/listings/category/accessories/">
<div class="polaroid">
<img src="/images/homegal/picture.jpg">
<p>picture</p>
</img>
</div>
</a>
</span>
</div>
CSS:
#home-gal-col {
width:15%;
float:left;
padding:5px;
}
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid img {
margin: 0 auto;
width: 100%;
}
.polaroid p {
text-align: center;
color: #D51386;
}
.span-homegal a {
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.span-homegal a:hover {
margin-bottom: 5px;
}
最佳答案
这是您要找的吗?
.polaroid:hover{
margin-top: -10px;
}
您还可以添加 CSS 3 动画,在 .polaoid
类上添加 transition
属性:
.polaroid {
border: 10px solid #fff;
border-bottom: 15px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
transition: margin 0.2s ease-out;
}
关于html - 仅使用 css 和 html 在 Div 上提升悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18614199/