javascript - 在鼠标悬停和鼠标移出时插入图像

Question

我在 div 中有一个图像，我试图在鼠标悬停时更改它，然后在鼠标移出时恢复。但是，我无法在鼠标移出时将图像插入到 div 中。是解决此问题的特定方法还是替代消息。问题似乎与在 HTML 插入中放置斜杠有关。

  <div class='myImage' onmouseout='this.innerHTML = '<img src='./images/myImage.jpg' />' onmouseover='this.innerHTML = \"\"; this.style.backgroundColor = \"#1D4088\"' style='height:100px; width:100px'><image src='./images/myImage.jpg'></div>

Answer 1

嗯，似乎你把事情复杂化了，不用担心。

尝试遵循“精灵”教程。

这是一个很好的：

如果你真的想进入它：http ://css-tricks.com/css-sprites/

Answer 2

我认为您的双引号和单引号有点冲突，请尝试将 javascript 放入函数中

<div class="myImage" onmouseout="toggle(this,'1')" onmouseover="toggle(this,'2')" style="height:100px; width:100px"><image src="./images/myImage.jpg"></div>

和 javascript

function toggle(e,a) {
    if(a=='2') {
        e.innerHTML = '';
        e.style.backgroundColor = '#1D4088';
    } else {
        e.innerHTML = '<img src="./images/myImage.jpg" />';
        e.style.backgroundColor = '';
    }
}