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

Question

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的问题：

我正在尝试在悬停.element /链接时为图像添加不透明度。我已经设法改变了背景，但我似乎无法找到一种让图像褪色的方法。

我已经尝试.element:hover .element img {opacity:.7}，但它没有工作......

谢谢！

Answer 1

您是否尝试过此代码：

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

Answer 2

尝试.element img:hover {opacity: 0.5;}

Answer 3

你尝试过的CSS错了，请使用：

.element:hover img {opacity:.7}