將鼠標懸停在文本上，圖像淡入和淡出

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

示例小提琴

請注意，我加速了小提琴中的過渡，因為在我的經驗中，5秒對於淡入效果有點過分。

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