Question

我刚刚开始学习Javascript和Jquery，但我最近遇到了很多问题。我找到了类似的主题，但没有什么是我正在寻找的。

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

非常感谢任何帮助！

Answer 1

$('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 2

只有css，可以做动画，淡化，变换等等.... #### EDIT添加了淡入淡出

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 3

非常简单，使用：hover和display：none / block。

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

将图片设为a标记的子元素，否则无法使用css进行悬停。然后根据需要设置图像的位置。

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

如果无法使图像成为a标记的子图像，则必须使用jquery。

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

除了

之外，

css应保持不变

 a:hover image{
    opacity:1;
}

你做了：

.opacity{
    opacity:1;
}

问候timotheus

将鼠标悬停在文字上，图片淡入

4 个答案: