鼠标悬停在 html 上更改图像答案

【问题标题】：on mouse over change image on html鼠标悬停在 html 上更改图像
【发布时间】：2012-11-15 06:15:02
【问题描述】：

我试图让图像在鼠标悬停时改变。这段代码适用于 IE，但不适用于 chrome、opera、safari 等其他浏览器。有什么想法吗？

<a href="#" onmouseover="document.myimage1.src='img/login_button_22.jpg';"
onmouseout="document.myimage1.src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" name="myimage1" /> </a>

【问题讨论】：

标签： javascript html image mouseover

【解决方案1】：

您应该使用 ID，而不是 NAME，并使用 document.getElementById 来选择元素。

IMG 元素，不是 FORM 元素，不应该具有 NAME 属性，但微软设法搞砸了。

<a href="#" onmouseover="document.getElementById('myimage1').src='img/login_button_22.jpg';"
onmouseout="document.getElementById('myimage1').src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" id="myimage1" /></a>

此外，使用 CSS 背景和 :hover 声明并完全使用 JavaScript 跳过这样做会更容易和更简洁。

方法如下：

HTML：

<a class="mybutton" href="#"></a>

CSS（相应地调整尺寸）：

.myButton {
     width:100px;
     height:50px;
     display:block;
     background-image:url(../img/login_button_11.jpg);

}

.myButton:hover {
     background-image:url(../img/login_button_22.jpg)
}

【讨论】：

尝试一下我可以看出它在 IE 上仍然可以完美运行，但在所有其他资源管理器中仍然无法正常运行...

【解决方案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/

【讨论】：

【解决方案3】：

试试这个：

<img src='img/login_button_11.jpg' onmouseover="this.src='img/login_button_22.jpg';" onmouseout="this.src='img/login_button_11.jpg';" />

【讨论】：