[英]Hover over text to show image
我得到的代碼適用於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>
我怎樣才能做到這一點?
謝謝。
這應該工作正常:
$(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>
元素添加數據屬性。 因為每個元素都有自己的形象。
然后,在懸停事件上,您可以訪問此屬性並將其加載到img元素中。
您也可以使用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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.