javascript - 将鼠标悬停在文本上，图像淡入淡出

Question

昨天我在将鼠标悬停在另一个链接上时让图像淡入方面得到了一些帮助，但我很难弄清楚如何让它淡出。这可能涉及java？我很抱歉，因为我对更高级的编码(过去的基本 CSS/HTML)还很陌生。

这是昨天某人给我的东西，它很好地淡入，但我希望它在您从链接上移开鼠标后淡出。

img { opacity: 0; }
a:hover +img {
    -webkit-animation: changeOpacity 5s;
    animation: changeOpacity 5s;
}
@-webkit-keyframes changeOpacity {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}

/* Standard syntax */
@keyframes changeOpacity {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}

这是 HTML:

<a href="http://lorempixel.com/300/300/sports/1">
    Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
<br>
<a href="http://lorempixel.com/300/300/sports/1">
    Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />

如有任何帮助，我们将不胜感激!

Answer 1

关键帧在这里是大材小用。您可以简单地使用 transition，然后根据需要更改 opacity 值:

img { 
    opacity: 0; 
    transition: opacity 5s;
}
a:hover +img {
    opacity: 1;
}

Example Fiddle

请注意，我加快了 Fiddle 中的过渡，因为根据我的经验，5 秒对于淡入效果来说有点过长。