Javascript onmouseover 背景图像更改答案

【问题标题】：Javascript onmouseover background image changeJavascript onmouseover 背景图像更改
【发布时间】：2019-05-23 08:15:34
【问题描述】：

我正在尝试将这个背景更改器从 在编辑后删除 实现到我的个人博客，该博客仅驻留在我的计算机上（不上传到互联网），但我不知道 js 是什么因为它是什么？我将如何将其添加到我的博客中？我知道有：

<body style="background-image : url();">

在html文件后面跟上：

<img src="" onmouseover="document.body.style.backgroundImage = 'url()';" width="20" height="20">

除了js还有别的吗？

编辑：这似乎只适用于 12x12 的 gif 图像？当我将自己的图像放入 url 位置时，bg 更改将不起作用。

第二次编辑：我发现了问题。我的 img 命名不正确。

【问题讨论】：

这些代码可以实现你想要的。不需要其他js。只需更改url 即可。

标签： javascript html image background onmouseover

【解决方案1】：

这是在 div 背景上的两个图像之间切换的东西。

let images = ['https://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery/1.jpg'];
var currentImage = 1;

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  currentImage = currentImage == 0 ? 1 : 0;
  event.target.style.backgroundImage = `url('${images[currentImage]}')`;
});

#myBackground {
  background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
  height: 300px;
  width: 300px;
  border: 2px; solid red;
}

&lt;div id="myBackground"&gt;&lt;/div&gt;

这是一个仅使用 CSS 的版本，但仅限于鼠标悬停，在您离开元素时重置。

    #myBackground {
      background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
      height: 300px;
      width: 300px;
      border: 2px; solid red;
    }
    
    #myBackground:hover {
      background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
    }

&lt;div id="myBackground"&gt;&lt;/div&gt;

这是一个在鼠标悬停时向 CSS 添加类的版本。

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  event.target.classList.add('myOverride');
});

        #myBackground {
          background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
          height: 300px;
          width: 300px;
          border: 2px; solid red;
        }
        
        #myBackground.myOverride {
          background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
        }

&lt;div id="myBackground"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您的代码可以正常工作。不需要任何其他的js代码。

【讨论】：