我得到的代码适用于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>
我该怎么做?
感谢。
答案 0 :(得分: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”更改为一个类,因为您将拥有多个。
然后,您可以向<b>
元素添加数据属性,其中包含图像源。因为每个元素都有自己的图像。
然后在Hover事件中,您可以访问此属性并将其加载到img元素中。
答案 1 :(得分:1)
您也可以使用css
a {
display: inline-block;
}
a + img {
display: none;
position: absolute;
top: 30px;
}
a:hover + img {
display: block;
}
&#13;
<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">
&#13;