在懸停上更改圖片並單擊，在鼠標懸停時從圖片上保留圖片

我是jQuery小白，所以也許您可以用我的代碼來幫助我。我有一個形象。我希望懸停圖像變化，當我點擊它時，另一個（第3）圖像進來，當我去鼠標我想保留第3圖像（如果點擊）。每張圖片都必須褪去。在懸停上更改圖片並單擊，在鼠標懸停時從圖片上保留圖片

也許你能幫助我嗎？到目前爲止，我只有懸停工作和點擊，但沒有淡出/淡出，並保持鼠標點擊圖像。

這是我的代碼，但我認爲你可以得到更好的代碼。

$("img#hovertom").hover(
    function() { 
    var id = $(this).attr("id"); 
    $(this).attr("src", "../img/tom_hover.png"); 
    }, 
    function() { 
     var id = $(this).attr("id"); 
    $(this).attr("src", "../img/tom.png"); 
    } 
); 

$("img#hoverdaniel").hover(
    function() { 
    var id = $(this).attr("id"); 
    $(this).attr("src", "../img/daniel_hover.png"); 
    }, 
    function() { 
     var id = $(this).attr("id"); 
    $(this).attr("src", "../img/daniel.png"); 
    } 
);

在html中，我只有ID爲hovertom的圖像。

來源

2013-07-01 Tom Te

使用[jsfiddle.net]（http://www.jsfiddle.net）或類似網站創建演示舉例說明它目前是如何工作的，你可能會得到更快的答案。 – Corion

@TomTe我的回答是你在找什麼？它對你有幫助嗎？ –

謝謝你;） –

您不必在jQuery中執行此操作，但在代碼或CSS like this中執行操作要簡單得多，但稍後在懸停時發生更改。你可以用直JavaScript和CSS，它會像你希望它

但既然你想讓它在jQuery中，你可以做like this

var clicked = false; 
$("#hovertom").mouseleave(function() { 
    if(!clicked) 
     $(this).attr("src", "http://www.so-gnar.com/wp-content/uploads/2011/04/TOMS-SHOES.jpg"); 
}); 
$("#hovertom").mouseenter(
    function() { 
     if(!clicked) 
     $(this).attr("src", "http://images.toms.com/media/catalog/product/cache/1/side/900x640/9df78eab33525d08d6e5fb8d27136e95/w/-/w-red-canvas-classics-s-su12.jpg"); 
}); 
$("#hovertom").click(
    function() { 
    $(this).attr("src", "http://images.toms.com/media/catalog/product/cache/1/side/900x640/9df78eab33525d08d6e5fb8d27136e95/w/-/w-ash-canvas-classics-s-su12_1.jpg"); 
    clicked = true; 
});

而只是重複切換出做like this ID和srcs，或者將它應用到類或簡單的'img'標籤

來源

2013-07-01 16:37:29

在懸停上更改圖片並單擊，在鼠標懸停時從圖片上保留圖片

回答

相關問題