14

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

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

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

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

4

8 回答 8

47

这是用于更改图像 onmouseover 和 onmouseout 的原生 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>
于 2012-10-11T17:25:02.980 回答
15

尝试这样的事情：

HTML：

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

jQuery： ​</p> 

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

编辑：（ 在发布 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');
});
于 2012-05-22T19:54:27.067 回答
4

你在 / 之前放一两个点

('src','./ico/view.hover.png')"
于 2012-05-22T19:49:45.157 回答
3

这是一个例子：

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

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

于 2012-05-22T19:53:31.623 回答
2

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

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

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

于 2012-05-22T19:51:02.843 回答
2

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

您需要在 中放置另一个标签，<a>然后您可以更改.background-imagea:hover

IE

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);
}
于 2012-05-22T20:16:07.437 回答
2 
<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/

于 2014-06-27T01:56:55.337 回答
1

我知道有人以同样的方式回答了这个问题，但我做了自己的研究，我之前写过这篇文章是为了看到那个答案。所以：我一直在寻找简单的内联 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。

于 2015-10-26T23:21:53.780 回答