Question

我想在JS中使用mouseOver / mouseOut函数来改变图标的颜色。

图标是白色的，但我希望它在悬停时变为绿松石，然后当鼠标远离图标时变回白色。

在我的档案中，我有3个文档：

.html
.css
.js

和2张图片：

skull.png（白色图标） skull2.png（绿松石图标）

这是我的HTML：

 <div id='skull'>
   <a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()">
   <img class="icon" src="skull.png" alt="skull"/></a>
 </div>

这是'icon'类的css：

.icon {
    margin: 0 25px;
    height: 40px;
    width: 40px;
}

功能的js：

function mouseOver() {
document.getElementById("skull").innerHTML = '<img src="skull2.png" />';
}
function mouseOut() {
document.getElementById("skull").innerHTML = '<img src="skull.png" />';
}

我有两个问题：

首先，当我将鼠标悬停在白色骷髅头上时，头骨在转动绿松石时不会拾取“图标”类所规定的尺寸。尺寸是.png的大小。我希望它们的大小为css中指定的skull.png。不确定这是如何工作的？
当您将绿松石头骨悬停时，图标不会返回白色

以下视频展示了我的意思：https://www.screenmailer.com/v/I5amMjkBaaeLtLU

（道歉我对编程很陌生）

谢谢：）

Answer 1

试试这个

function mouseOver() {
    document.getElementById("skull").innerHTML = '<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="skull2.png" class="icon" alt="skull" />';
}
function mouseOut() { 
    document.getElementById("skull").innerHTML = '<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="skull.png" class="icon" alt="skull" />';
}

您没有将img类设置为.icon。此外，您在第一次mouseOver来电中正在从您的div中删除主播，因为您正在通过<img src="skull2.png" />替换它的内容

这必须解决你的两个问题，但有更好的方法来做到这一点。

为您的图片添加id，然后加入这些功能并仅更改图片的src属性。

Answer 2

首先，您不必更改整个内部HTML，您可以通过仅更改图像src属性来实现。这样，您只能通过ID获取图像一次，而不是每次调用该函数。

＆＃13;

var img = document.getElementById('myImg');

img.onmouseout = function () {
   this.src = 'http://www.facetheforce.today/darthvader/200/200';
};

img.onmouseover = function () {
   this.src = 'http://www.facetheforce.today/c3po-alt/200/200';
};

＆＃13;

<img id="myImg" src="http://www.facetheforce.today/darthvader/200/200"/>

＆＃13;

你可以采用的另一种方法是使用CSS悬停和背景图像。例如：

＆＃13;

#bg-image {
  width: 200px;
  height: 200px;
  display: block;
  background: url("http://www.facetheforce.today/darthvader/200/200");
}

#bg-image:hover {
  background: url("http://www.facetheforce.today/c3po-alt/200/200");
}

＆＃13;

<div id="bg-image"></div>

＆＃13;

JS：mouseOver函数：新状态不会从旧状态中获取css

2 个答案: