更改圖像onmouseover

Question

什么是鼠標懸停時更改圖像的正確方法（使用/不使用jQuery）？

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>

好的，這是有效的，但是如何在mouseout之后改回原始圖像？

如果有可能，我想在沒有document.ready函數的情況下內聯這個東西。

Answer 1

這是一個原生的javascript內聯代碼來更改圖像onmouseover＆onmouseout：

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>

Answer 2

嘗試這樣的事情：

HTML ：

<img src='/folder/image1.jpg' id='imageid'/>

jQuery的：

$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

• DEMO

編輯:( OP HTML發布后）

HTML：

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png"/>
</a>

jQuery的：

$('#name img').hover(function() {
  $(this).attr('src', '/ico/view1.png');
}, function() {
  $(this).attr('src', '/ico/view.png');
});

• DEMO

Answer 3

你要在/之前放一兩個點

('src','./ico/view.hover.png')"

Answer 4

這是一個例子：

HTML代碼：

<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>

JavaScript代碼：

$(document).ready(function() {
    $( "#myImg" ).mouseover(function(){
        $(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
    });

    $( "#myImg" ).mouseout(function(){
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
    });
});

編輯：對不起，你的代碼有點奇怪。 現在我明白你在做什么了。 ;）當然，懸停方法更好。

Answer 5

jQuery有.mouseover()和.html() 。 您可以將mouseover事件綁定到一個函數：

1. 隱藏當前圖像。
2. 用您要切換的html圖像替換當前的html圖像。
3. 顯示您隱藏的div。

當你得到mouseover事件表明光標不再懸掛在div上時，可以做同樣的事情。

Answer 6

你可以使用CSS做到這一點。

您需要在<a>放置另一個標記，然后您可以在a:hover上更改CSS background-image屬性。

即

HTML：

<a href="#" id="name">
  <span>&nbsp;</span> 
</a>

CSS：

a#name span{
  background-image:url(image/path);
}

a#name:hover span{
  background-image:url(another/image/path);
}

Answer 7

<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

演示http://jsfiddle.net/W6zs5/

Answer 8

我知道有人以同樣的方式回答了這個問題，但是我做了自己的研究，之前我寫過這篇文章來看看答案。 所以：我正在尋找一些簡單的內聯JavaScript，只需要在img ，而不是將它“包裝”到a標簽中（所以不使用document.MyImage ，我使用了this.src ）

<img 
onMouseOver="this.src='ico/view.hover.png';" 
onMouseOut="this.src='ico/view.png';" 
src="ico/view.png" alt="hover effect" />

它適用於所有當前更新的瀏覽器; IE 11（我還在IE5及更高版本的IE開發者工具中測試過它），Chrome，Firefox，Opera，Edge。