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＆amp;的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 code：

<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事件绑定到函数：

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

当你获得mouseover事件表明光标不再悬挂在div上时，可以做同样的事情。

Answer 6

你可以只使用CSS。

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

即

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的简单内容，只需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" /> 1}}）

/workspace
  /src
    /package1
  /vendor
    /src
      /somepackage
      /anotherpackage
      /package1

适用于所有当前更新的浏览器; IE 11（我也在IE5及以上的IE开发者工具中测试过），Chrome，Firefox，Opera，Edge。

更改图像onmouseover

8 个答案:

DEMO

DEMO