html - 我需要为此创建额外的 CSS 类吗？

Question

我有一个关于此图像悬停效果的 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;
}

Answer 1

你可以尝试使用这样的东西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);
}