Question

首先，我想让你知道我是CSS的初学者，所以这可能是一个简单/愚蠢的问题。我试图创建一个带有图片的div，当它徘徊时，图片会改变不透明度，并且会出现带有图标的3个框。问题是我的盒子不透明度也改变了，因为它在同一个div中，但如果我把它放在div之外，问题是当盘旋在盒子上时图像会失去不透明度的变化。我怎样才能解决这个问题？我尝试过对我来说似乎合乎逻辑但却没有成功的一切。感谢任何帮助！

CSS代码：

.boxfadeout {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
}

.boxfadeout:hover {
-webkit-opacity: 0.7 !important;
-moz-opacity: 0.7 !important;
opacity: 0.7 !important;
}

.withfadeout {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
}

.withfadeout:hover {
-webkit-opacity: 0.6 !important;
-moz-opacity: 0.6 !important;
opacity: 0.6 !important;
}

#box {
background-color: rgba(0,0,0,0.68);
width: 35px;
height: 35px;
padding: 10px;
position: absolute;
left: 80px;
top: 150px;
z-index: 2;
opacity: 1;
}

#box2 {
background-color: rgba(0,0,0,0.68);
width: 35px;
height: 35px;
padding: 10px;
position: absolute;
left: 120px;
top: 150px;
z-index: 2;
opacity: 1;
}

#box3 {
background-color: rgba(0,0,0,0.68);
width: 35px;
height: 35px;
padding: 10px;
position: absolute;
left: 160px;
top: 150px;
z-index: 2;
opacity: 1;
}

.white, .white a {
color: #fff;
}

.showme { 
display: none;
}

.showhim:hover .showme {
display : block;
}

BODY代码：

<div class="showhim">
<div class="withfadeout"><img src=".jpg" with="300px" height="340px">
<div class="showme">
<a href="">
<div id="box" class="boxfadeout"><span class="glyphicon glyphicon-plus white"></span></div></a>
<a href="">
<div id="box2" class="boxfadeout"><span class="glyphicon glyphicon-heart white"></span></div></a>
<a href="">
<div id="box3" class="boxfadeout"><span class="glyphicon glyphicon-shopping-cart white"> </span></div></a>`enter code here`
</div>
</div>
</div>

Answer 1

改为在图像上设置不透明度：

div:hover img{
    opacity: .7
}

虽然@Diodeus答案是正确的，但它并没有考虑到您可能有渐变或图像的背景，并且在您的情况下不起作用。

Answer 2

不透明度会影响所有子元素。 RGBA（alpha通道）没有。将您的转换更改为使用RGBA。

CSS Transitions - div上的不透明度更改但不是div内容

2 个答案: