懸停多圖像交換

嗨，夥計們我一直在四處尋找這個答案，我的頭疼。懸停多圖像交換

我有一個包含團隊成員圖片的頁面，我希望它能夠在您將鼠標懸停在每張圖片上時顯示該團隊成員的另一張圖片。簡單，我可以用css爲每個成員做這件事，但想知道是否有一種使用查詢的方式，以便可以通過文件的名稱來完成，例如， dan.jp和dan-hover.jpg。

感謝

丹

編輯：我也想它是這樣的，當你將鼠標懸停關閉圖像，原始圖像取代了其他圖像，新的圖像，而鼠標懸停只出現在圖像上。

來源

2011-10-05 Dan Davies

你有什麼這麼遠嗎？ –

對不起，這正是我過去2小時所做的事情，結果只顯示如何替換一張圖片或結果顯示我不明白我以爲我會問專家。感謝大家的幫助。 –

我認爲這個問題現在越來越多了。我的意思是，我明白了人們爲什麼要問這個問題，但是當大多數人詳細解釋他們的問題時，在他們的問題中，他們可能已經嘗試了他們所知道的一切，並且不知道下一步該做什麼。只是我的想法無論如何 –

只是用戶.hover

$('#images img').hover(
    $this = $(this); 
    function(){ 
     $this.data('src', $this.attr('src')); // store the current image url on hover 
     var img_name_extension = $this.data('src').split('.'); 
     var hover_image = img_name_extension[0] + '-hover.' + img_name_extension[1]; 
     $this.attr('src', hover_image); 
    }, 
    function(){ 
     $this.attr('src' , $this.data('src')); // revert back to the old image url on hover out 
    } 
);

來源

2011-10-05 13:58:58

嗨，我是新來的所有這些，但（'＃你的圖片'）部分是什麼意思？我在那裏放什麼？我有多張照片？ –

把你的照片放在一個div中，並給它一個#images –

的編號謝謝你，我用了一下這個和下面的一個。得到它的工作，再次感謝 –

實際上有很多關於這個主題的主題和示例。

例如，請看這裏：
Change the image source on rollover using jQuery

來源

2011-10-05 14:04:36 ZolaKt

我想你需要的東西是這樣的：

$('img').hover(function(){ 
    $(this).data('on', 
     $(this).attr('src')).attr('src', $(this).data('on').replace(/(\.\w+)$/, "-hover$1") 
    ); 
},function(){ 
    $(this).attr('src', $(this).data('on')); 
});

編輯：改變只有特定的圖像，你可以（例如）這樣做：

將所有需要的圖像放入容器中

<div class="desired_images"> 
    <img src="..." /> 
    ... 
</div>

，然後更改jQuery選擇到：

$('.desired_images img') ...

來源

2011-10-05 14:07:48 Teneff

好點+1 –

嗨，非常感謝，我現在已經設法達到了令人敬畏的效果，但是現在我試圖在我將鼠標懸停在圖標上時更改所有圖像，甚至是我的標誌。你可以請我回答我如何解決這個問題。 –

謝謝你的幫助，結合這一個和上面的一個我得到它的工作。非常感謝他們 –

懸停多圖像交換

回答

相關問題