Javascript onmouseover背景圖片更改

Question

我正在嘗試從僅對我的個人博客（僅上傳到我的計算機）（而不是上傳到互聯網） 進行編輯后 ，刪除該背景更改器，但是我不知道它的作用是什么？ 我如何將其添加到我的博客中？ 我知道有：

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

在html文件中，后面跟着：

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

除了js還有其他東西嗎？

編輯：看來這僅適用於12x12 gif？ 當我將自己的圖片放入url位置時，bg更改將不起作用。

2nd編輯：我發現了問題。 我的img命名不正確。

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

 <div id="myBackground"></div>

這是一個僅使用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'); }

 <div id="myBackground"></div>

這是一個在鼠標懸停時向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'); }

 <div id="myBackground"></div>

Answer 2

您的代碼可以正常工作。 無需任何其他js代碼。

Javascript onmouseover背景圖片更改

問題描述

2 個解決方案

解決方案1
1 2018-12-24 03:30:08

解決方案2
1 2018-12-24 04:02:40

Javascript onmouseover背景圖片更改

問題描述

2 個解決方案

解決方案1 1 2018-12-24 03:30:08

解決方案2 1 2018-12-24 04:02:40

解決方案1
1 2018-12-24 03:30:08

解決方案2
1 2018-12-24 04:02:40