css - 悬停链接或元素时如何淡化图像？

Question

我的代码:

.element {
    position:fixed;
    display:inline-block;
    font-size:10px;
    background:#ffffff;
    height:50px;
    width:500px;
}
    
.element:hover {
    background:#000;
}

.element img {
    float:left;
    height:30px;
    width:30px;
    opacity:1;
}
    
.text {
    display:inline-block;
    height:37px;
    width:183px;
}

<a href="http://stackoverflow.com/users/22656/jon-skeet">
    <div class="element">
        <img src="https://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=64&d=identicon&r=PG">
        <div class="text">Jon Skeet</div>
    </div>
</a>

---

我的问题:

我试图在悬停 .element/link 时为图像添加不透明度。我已经设法改变了背景，但我似乎找不到让图像淡出的方法。

我已经尝试过 .element:hover .element img {opacity:.7} 但它没有用...

谢谢!

Answer 1

你试过这段代码吗:

.element:hover img { opacity:.7;}