html - 如何在 CSS 中为 "content"使用悬停淡入淡出？

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。