我有一个关于此图像悬停效果的 CSS 问题 - “Fiddle”。我不能在 .img-overlay
中使用 width 100% 来覆盖两张图片的整个区域,所以我必须使用 width:138px
第一个和 width:300px
第二个。在这样做的过程中,我最终制作了 4 个以上的类 (.img-overlay2
.img-overlay2.2
.img-overlay2 h4 .img-overlay2 p
, .img-wrap:hover .img-overlay2
) 有没有更简洁的方法来实现?我可以避免一些重复吗?
CSS
.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.img-overlay2{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:300px;
height:100%;
z-index:1000;
}
.img-overlay2.2{
width:100%;
}
.img-overlay2 h4, .img-overlay2 p{
padding:0 10px;
}
.img-wrap:hover .img-overlay2{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
最佳答案
你可以尝试使用这样的东西http://jsfiddle.net/EyAdp/
HTML:
<div class="a image"><div class="overlay"></div></div>
<div class="b image"><div class="overlay"></div></div>
CSS:
.a {
width:150px;
height:60px;
background-image:url("http://placekitten.com/150/60");
}
.b {
width:100px;
height:50px;
background-image:url("http://placekitten.com/100/50");
}
.image {
position:relative;
}
.overlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.overlay:hover {
background-color:rgba(1,1,1,0.3);
}
关于html - 我需要为此创建额外的 CSS 类吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18816913/