圖片切換jquery mouseover

我目前有一些問題得到一個mouseover和mouseout函數在jquery中工作。我有兩個名爲'images/doomsday.jpg'的圖像，另一個名爲'keep_calm.png'，當鼠標懸停在它上面時，我想交換它，然後在沒有時交換。我已經包含了我目前正在嘗試使用的代碼，任何人都可以看到它的任何問題以及我出錯的地方嗎？圖片切換jquery mouseover

$(function() { 
$("images/doomsday.jpg") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png"; 
     $(this).attr("src", src); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("images/keep_calm.png"); 
     $(this).attr("src", src); 
    });

}）;

來源

2013-01-07 Ben Thompson

顯然選擇器是錯誤的：您應該使用例如$("#imageid")其中image id是要更改的圖像的ID。

來源

2013-01-07 11:39:18

您的選擇器是錯誤的。您可以瞭解選擇器here。

這是圖像交換的demo。

代碼：

$('document').ready(function() { 

    $('img').on({ 
    'mouseover' : function() { 
     $(this).attr('src','http://media02.hongkiat.com/css3-code-slim/css3-markup.jpg'); 
    }, 
    mouseout : function() { 
    $(this).attr('src','http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'); 
    } 
    }); 
});

來源

2013-01-07 11:42:57

也許這樣的事情DEMO：http://jsfiddle.net/m4WuU/只是使用jQuery toggleClass

HTML

<div class="holder"><div>

CSS：

.holder { 
    background-image:url('images/keep_calm.png');   
    } 


.swapHolder { 
    background-image:url('images/doomsday.png'); 
}

個

JS：

$('.holder').on('hover', function() { 
    $('.holder').toggleClass('swapHolder'); 
});

來源

2013-01-07 11:53:36 InTry

目前還沒有使用的選擇。這是你的最終代碼應該怎麼看起來像

的HTML

<div> <img src="images/doomsday.jpg" id='myimage' /> </div>

JavaScript的

$('document').ready(function() { 
$(function() { 
$("#myimage") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png"; 
     $(this).attr("src", src); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("images/keep_calm.png"); 
     $(this).attr("src", src); 
    }); 
}); 
});

來源

2013-01-20 10:02:40

圖片切換jquery mouseover

回答

相關問題