如何在 CSS 中对“内容”使用悬停淡化？

Question

我有一张图片，当你将鼠标悬停在它上面时，它会改变来源。它工作得非常好，只是它根本不会褪色。

另外，不要询问 div/image 调用者。我使用了“#left:hover #logoLeft {”，因为我希望当您将鼠标悬停在它所在的 div 上时图像会褪色。它有效，所以暂时忽略它并假装它说“logoleft:hover”或其他内容。

“左”id 对此并不重要，我不想发布它以使其更加混乱，因为它实际上与我想要实现的目标无关。

这是我目前的代码：

<div id="left">
    <img id="logoLeft"/>
</div>

CSS：

#logoLeft {
content:url("http://i.imgur.com/M8RPCkX.png");
height: 5em;
float: right;
margin-top: 2.5em;
transition: content 0.8s ease;
-moz-transition: content 0.8s ease;
-webkit-transition: content 0.8s ease;
}

#left:hover #logoLeft {
content:url("http://i.imgur.com/dlN4akx.png");
transition: content 0.8s ease;
-moz-transition: content 0.8s ease;
-webkit-transition: content 0.8s ease;
}

Answer 1

您不能像那样转换内容。实现这一点的最佳方法是使用两张图片（您可以使用背景图片，但这不是语义）。

<img id="logoLeft" src="//i.imgur.com/M8RPCkX.png" />
<img src="//i.imgur.com/dlN4akx.png" />

CSS：

#logoLeft + img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}
#logoLeft:hover + img {
    opacity: 1;
}

加号表示“兄弟姐妹”，如果您想要更好的浏览器支持，可以将其替换为id。

Answer 2

我怀疑你甚至可以为content 转换。

我建议只是淡出background-image。