Javascript 在MouseOver上更改图像

在mouseout上来回更改图像（使用/不使用jQuery）的正确方法是什么

好的，这是可行的，但是如何在鼠标移出后更改回原始图像

---

如果可能的话，我希望在不使用document.ready函数的情况下以内联方式完成此操作。

在/

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

jQuery具有和。您可以将鼠标悬停事件绑定到函数：

隐藏当前图像

将当前html图像替换为要切换的图像

显示您隐藏的div

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

以下是一个示例：

HTML代码：

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

对不起，你的代码有点奇怪。现在我明白你在做什么了

---

当然，悬停法更好。

试试这样的方法：

HTML：

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

编辑：（发布操作HTML后）

HTML:

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

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

---

您只需使用CSS就可以做到这一点

您需要在

中放置另一个标记，然后可以更改

a:hover

上的CSS

背景图像

属性

i、 e

HTML:

---

以下是用于更改图像onmouseover&onmouseout的本机javascript内联代码：

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



它适用于所有当前更新的浏览器；IE 11（我还在IE5及以上版本的IE开发工具中进行了测试）、Chrome、Firefox、Opera、Edge。
标签没有
src
属性。你的意思是一个
标签吗？可能是解决问题的最好和简单的方法。这种快速而懒惰的解决方案值得称赞
$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

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

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

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

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

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

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

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

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