将鼠标悬停在文本上以显示图像

Question

我得到了适用于 1 个文本的代码，当您将鼠标悬停在它上面时会显示图像。

但我需要它来处理显示不同图像（在同一区域）的多个文本。像这样：https://handleidingen.vodafone.nl/web/samsung-galaxy-s5/basisfuncties/voicemail/oproepen-doorschakelen-naar-voicemail

这是我的代码：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Clicker").hover(function(){
$( "#wallpaperamIMage" ).toggle();
});
});</script>
<b id="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;">Altijd doorschakelen</b>
<div><img id="wallpaperamIMage" style="display:none;" src="http://cdn.mobilesupportware.com/ml/3494895.png"></div>

我该怎么做？

谢谢。

Answer 1

这应该可以正常工作：

$(function() {
  $(".Clicker").hover(function(){
   $( "#wallpaperamIMage" ).attr("src", $(this).data("img"))
   $( "#wallpaperamIMage" ).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b class="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;" data-img="//placehold.it/200x200">Altijd doorschakelen</b>
<b class="Clicker" style="color:blue;text-decoration:underline;cursor:pointer;" data-img="//placehold.it/300x300">Altijd doorschakelen</b>
<div><img id="wallpaperamIMage" style="display:none;" src=""></div>

一开始你必须把"Clicker"改成class，因为你会有不止一个。

然后您可以将数据属性添加到包含图像源的 <b> 元素。因为每个元素都有自己的图像。

然后在悬停事件上您可以访问此属性并将其加载到 img 元素中。

Answer 2

您也可以使用css

a {
  display: inline-block;
}
a + img {
  display: none;
  position: absolute;
  top: 30px;
}
a:hover + img {
  display: block;
}

<a href="">image one</a>
<img src="http://placeimg.com/200/200/natuee">
<a href="">image two</a>
<img src="http://placeimg.com/200/200/people">
<a href="">image three</a>
<img src="http://placeimg.com/200/200/tech">

将鼠标悬停在文本上以显示图像

Hover over text to show image

javascript

css

hover