懸停在不同元素的IMG標籤類改變圖片src

說我有這樣的事情：懸停在不同元素的IMG標籤類改變圖片src

<div class="right"> 
<article class="left_image"> 
<img src="images/coolestimageontheplanet.jpg" class="image_left"> 
</article>

然後，我有一個UL列表：

<ul class="LISTS"> 
     <li><a href="#link" target="_blank" class="hov5">Link 1</a></li> 
     <!-- etc --> 
    </ul>

我會約10以直接上面的標記方式列出項目。基於懸停類，我想換出與class="image_left"相關的圖像源，如上所示。所以盤旋在class="hov5"你得到hov5圖像。

來源

2015-09-28 Fred Randall

那麼，你到目前爲止嘗試過什麼？ – disinfor

「獲取hov5圖像」是什麼意思？什麼決定了「hov5圖像」會是什麼？ – scottheckel

我猜班級名稱決定圖像名稱（？！），但我建議使用這個不錯的功能：https：//api.jquery.com/data/ – sinisake

你可以添加對鼠標懸停&鼠標離開事件偵聽器，然後相應地更改image.src，像這樣

window.addEventListener('load', function() { 
 
    function initImageHover(selector, displaySelector) { 
 
    var imageContainer = document.querySelectorAll(displaySelector)[0], 
 
     elements = document.querySelectorAll(selector); 
 

 
    for (var i = 0, len = elements.length; i < len; i++) { 
 
     createHover(elements[i], imageContainer, imageContainer.src); 
 
    }; 
 
    } 
 

 
    function createHover(that, targetElement, originalImage) { 
 

 
    that.addEventListener('mouseover', function() { 
 
     var src = that.getAttribute('data-src'); 
 
     if (src) { 
 
     targetElement.src = src; 
 
     } 
 
    }); 
 
    that.addEventListener('mouseleave', function() { 
 
     targetElement.src = originalImage; 
 
    }); 
 
    } 
 

 
    initImageHover('li > a', '.image_left'); 
 
});

<div class="right"> 
 
    <article class="left_image"> 
 
    <img src="images/coolestimageontheplanet.jpg" class="image_left"> 
 
    </article> 
 

 
    <ul class="LISTS"> 
 
    <li><a href="#link" target="_blank" class="hov1">Link 1</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" class="hov2">Link 2</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" class="hov3">Link 3</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" class="hov4">Link 4</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" class="hov5">Link 5</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" class="hov6">Link 6</a> 
 
    </li> 
 
    <li><a href="#link" target="_blank" data-src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59" class="hov7">Link 7</a> 
 
    </li> 
 
    </ul>

來源

2015-09-28 21:44:43 Icepickle

非常感謝，爲此！我正在使用這個。有一個問題，任何鼠標懸停之前的任何方式都可以在懸停之前返回到原始圖像源？ –

@YourConscious是的，你也可以在圖像上放置一個標籤並將其放回到'mouseleave'回調中，類似於'mouseover'回調中使用的方式 – Icepickle

謝謝，我想我還不夠具體，原始來源不是聲明懸停數據源的位置。看看這裏，如果你覺得你可以幫助這個！ http://stackoverflow.com/questions/32846733/on-mouseleave-revert-image-back-to-origin-source-that-is-outside-where-hover-dat –

添加數據標籤，像這樣：

<ul class="LISTS"> 
     <li><a href="#link" target="_blank" class="hov5" data-img="images/newimg.jpg">Link 1</a></li> 
     <!-- etc -->

然後使用這樣的代碼：

$("ul.LISTS>li").hover(function(){ 
    var imgurl = $(this).data("img"); 
    $(".image_left").attr("src",imgurl); 
}, 
function(){ 
    $(".image_left").attr("src","images/coolestimageontheplanet.jpg"); 
});

來源

2015-09-28 21:37:12

懸停在不同元素的IMG標籤類改變圖片src

回答

相關問題