更改 JavaScript 中 div 的背景

Question

我的代码有一张div和三张图片我的主要任务是在 div 中显示相同的图像，当我将鼠标悬停在任何图片上时，我无法理解的是我如何使用变量来做到这一点，以便将来如果添加更多图片它不会产生任何对我来说有问题注意::我想通过使用我不想硬编码图像源的变量来做到这一点。我也附上图片仅供参考。

function showproperties(element) {
  var x = document.getElementById("box001");
  x.innerHTML = element.alt;
  var y = element.src;
  document.getElementById("printsrc").innerHTML = y;
  x.style.backgroundImage = y;
}

<body>
  <div id="box001">main hover box

  </div>
  <div class="row">
    <div class="image001 imgresize">
      <img src="img01.jpg" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
    </div>
    <div class="image002 imgresize">
      <img src="img02.jpg" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">

    </div>
  </div>

</body>

image

Answer 1

我尝试重现您的问题并对其进行了一些更改。我希望这就是您希望它工作的方式。我使用了一些 gif 图片 url 用于演示目的。

HTML:

       <div id="box001" style="width: 100px;height: 100px; margin:7px">main hover box
      
        </div>
        <div class="row">
          <div class="image001 imgresize">
            <img src="https://c.tenor.com/Lvhj4QVL8-4AAAAS/server-is-for-javascript.gif" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
          </div>
          <div class="image002 imgresize">
            <img src="https://c.tenor.com/FIcvxhgc1sgAAAAS/dit-is-een-code-blok-code.gif" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
      
          </div>
        </div>

JS:

var x = document.getElementById("box001");

function showproperties(element) {
  var y = element.src;
  x.innerText = "";
  x.style.backgroundImage = `url(${y})`;
}

function defaulttext(element) {
  x.innerText = "main hover box";
  x.style.backgroundImage = "none";
}

这里有完整的工作代码 fiddle - https://jsfiddle.net/0h1urctn/

更改 JavaScript 中 div 的背景

Changing background of div in JavaScript

html

javascript

css

innerhtml