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

Question

我刚刚开始学习Javascript和jquery，但最近我一直有很多问题。我发现了类似的主题，但没有什么是我正在寻找的。

本质上，我想将鼠标悬停在文本链接上，并将图像淡入到页面的不同位置。我不确定这是否可以用CSS完成，因为我不熟悉较新的CSS代码。

任何帮助将不胜感激！只有

Answer 1

CSS，可以做动画，淡入淡出，它等... ####编辑添加淡入转换成在

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

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

$('a#hoverme').hover(function(){ 
 
    $("#book").fadeIn("slow", function() { 
 
     console.log('done!'); 
 
     }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' id='hoverme'>link</a> 
 
<br> 
 
<img id="book" src="http://i.stack.imgur.com/TODEi.png" style='display:none;'>

Answer 3

非常简单，使用：悬停和显示：无/块。

CSS：

.hover_img a { 
     position: relative; 
    } 

    .hover_img a span { 
     position: absolute; 
     display: none; 

    } 

    .hover_img a:hover span { 
     display: block; 
    } 

HTML：

<div class="hover_img"> 
    <a href="#">Show Image<span><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /></span></a> 
</div> 

http://codepen.io/anon/pen/QwObyo

Answer 4

使图像标签的子元素，否则你无法用CSS徘徊。如果您希望从图像中设置位置。

img{ 
    position: absolute; 
    opacity:0; 
    transition: opacity 0.5s ease-in-out; 
} 
a:hover image{ 
    opacity:1; 
} 

如果它是不可能的使图像的孩子的标记比你必须使用jQuery的。

$('a').mouseenter(function(){ 
    $('img').addClass('opacity') 
}); 
$('a').mouseleave(function(){ 
    $('img').removeClass('opacity') 
}); 

CSS应保持不变，除了

a:hover image{ 
    opacity:1; 
} 

你做：

.opacity{ 
    opacity:1; 
} 

问候提摩太