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

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>

这是我的 css 'icon' class:

.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" />';
}

我有两个问题：

首先，当我将鼠标悬停在白色头骨上时，头骨在变成绿松石色时不会拾取 "icon" class 设置的尺寸。尺寸是 .png 的大小。我想要 css 中指定的 skull.png 大小。不确定这是如何工作的？
当您将鼠标悬停在绿松石骷髅头上时，图标不会return变为白色

这里有一段视频可以进一步说明我的意思：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 class 设置为 .icon。此外，您在第一个 mouseOver 调用中从 div 中删除锚点，因为您要将其内容替换为 <img src="skull2.png" />

这一定能解决您的两个问题，但还有更好的方法。

向您的图像添加 id，然后进入函数并仅更改图像的 src 属性。

Answer 2

首先，您不必更改整个内部 HTML，只需更改图像 src 属性即可。这样你就可以通过 ID 只获取一次图像，而不是每次调用该函数时。

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';
};

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

另一种方法是使用 CSS 悬停和背景图片。例如：

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

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

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

JS: mouseOver function: new state doesn't pick up css from the old state

javascript

html

css

function

mouseover