CSS Transitions - div 上的不透明度变化但不是 div 内容

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;
}

主体代码:

<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 的回答是正确的，但它没有考虑到您可能有带有渐变或图像的背景，并且在您的情况下不起作用。