将鼠标悬停在文本上，图像淡入淡出答案

【问题标题】：Hover Over Text, Image Fades In & Out将鼠标悬停在文本上，图像淡入淡出
【发布时间】：2015-04-06 20:13:34
【问题描述】：

昨天我在将鼠标悬停在另一个链接上时让图像淡入时得到了一些帮助，但我很难弄清楚如何让它淡出。这可能涉及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" />

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

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

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

Example Fiddle

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

【讨论】：

或者只转换opacity？
@Jivings 是的，如果需要，你可以限制它。
Don't use transition:all unless it's necessary.
@Jivings 谢谢 - 每天都是上学日。已更新。
非常感谢！如果我决定将图像/文本放置在页面上的不同位置，我假设此代码将起作用？

【解决方案2】：

我会这样做：（直接在下面运行）

$('a').hover( function(){
    $(this).parent().find('img').css('opacity',1)
}, function(){
    $(this).parent().find('img').css('opacity',0)
});

img{
    opacity : 0;
  transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a>        <br>
    <img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
</div>
    
<div>   
<a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a><br>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
</div>

【讨论】：