Javascript 在鼠标悬停时更改图像

Change image onmouseover

提问by Adrian

What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?

在鼠标悬停时更改图像并返回鼠标悬停（使用/不使用 jQuery）的正确方法是什么？

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

Ok, this is working, but how to change back to the original image after mouseout?

好的，这是有效的，但是之后如何改回原始图像mouseout？

If it is possible, I want to do this thing inline, without document.ready function.

如果可能的话，我想在没有 document.ready 函数的情况下内联做这件事。

回答by Dominic

here's a native javascript inline code to change image onmouseover & onmouseout:

这是一个本机 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>

回答by Naveed

Try something like this:

尝试这样的事情：

HTML:

HTML:

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

jQuery:?

jQuery的：？

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

• DEMO

• 演示

EDIT:(After OP HTML posted)

编辑：（在 OP HTML 发布后）

HTML:

HTML：

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

jQuery:

jQuery：

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

• DEMO

• 演示

回答by Felipe Queiroz

Thy to put a dot or two before the /

你在 / 之前放一两个点

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

回答by davidbuzatto

Here is an example:

下面是一个例子：

HTML code:

HTML代码：

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

JavaScript code:

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

Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;) The hover method is better, of course.

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

回答by Sad Danbo

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

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

回答by Gareth 'Ari' Aye

jQuery has .mouseover()and .html(). You can tie the mouseover event to a function:

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

1. Hides the current image.
2. Replaces the current html image with the one you want to toggle.
3. Shows the div that you hid.

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

The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.

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

回答by revagomes

You can do that just using CSS.

你可以只使用 CSS 来做到这一点。

You'll need to place another tag inside the <a>and then you can change the CSS background-imageattribute on a:hover.

您需要在 中放置另一个标签<a>，然后您可以更改 上的 CSSbackground-image属性a:hover。

i.e.

IE

HTML:

HTML：

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

CSS:

CSS：

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

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

回答by Sándor Zuboly

I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the atag (so instead of the document.MyImage, I used this.src)

我知道有人以同样的方式回答了这个问题，但我进行了自己的研究，我之前写过这篇文章以查看该答案。所以：我正在寻找一些简单的内联 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" />

It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.

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