鼠标悬停改变图片

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 函数。

- Adrian

---

<a>标签没有src属性。你是不是指的是<img>标签？ - gen_Eric

Answer 1

以下是一个用原生JavaScript编写的内联代码，可在鼠标悬停和移出时更改图像：

<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>

- Dominic

---

可能是这个问题的最佳简单解决方案。 - Gabit Kemelov

这个快速而懒惰的解决方案值得赞扬。 - Mavichow

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');
});

• 演示

编辑：（在原始问题的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');
});

• 演示

- Naveed

Answer 3

尝试在 / 前面加上一个或两个点号

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

- Felipe Queiroz

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");
    });
});

编辑：抱歉，你的代码有点奇怪。现在我明白你在做什么了。;) 当然，使用“hover”方法更好。

- davidbuzatto

Answer 5

我知道有人已经以同样的方式回答了这个问题，但我做了自己的研究，并在查看答案之前写下了这篇文章。所以：我正在寻找一个简单的内联JavaScript，只需在img标签上使用，而不是将其“包装”到a标签中（所以我使用了this.src而不是document.MyImage）。

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

它可以在所有当前更新的浏览器上运行；IE 11（我还在IE5及以上版本的开发者工具中对其进行了测试），Chrome，Firefox，Opera，Edge。

- iorgv

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);
}

- revagomes

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">

Demo http://jsfiddle.net/W6zs5/

- Sad Danbo

Answer 8

jQuery有.mouseover()和.html()。您可以将mouseover事件绑定到一个函数上：

1. 隐藏当前图片。
2. 用要切换的图片替换当前html图片。
3. 显示您隐藏的div。

当您收到mouseover事件时，指示光标不再停留在div上时，可以执行相同的操作。

- Gareth 'Ari' Aye