Question

我在html中构建一个webpag。当我将鼠标悬停在div上时，图像必须改变，但它什么都不做。任何人都有任何想法？

<!doctype html>
<html>
    <head>
          <meta charset ="UTF-8"/>
          <title>Oef 19.5</title>
          <link href="19_5.css" rel="stylesheet"/>
          <script>

          function kleuren(veld)
          {
            var tshirt = document.getElementsByClassName("shirt");

            tshirt.src=veld.id+".jpg";
          }


          </script>
    </head>
<body>
    <h1>Pick a color</h1>
    <p><img class="shirt" src="gray.jpg"></p>

    <div id="pink" class="roze" onmouseover="kleuren(this)"></div>
    <div id="blue" class="blauw" onmouseover="kleuren(this)"></div>
    <div id="brown" class="bruin" onmouseover="kleuren(this)"></div>

</body>
</html>

Answer 1

var tshirt = document.getElementsByClassName("shirt");返回元素集合，以便像

一样访问它

tshirt[0].src=veld.id+".jpg"; //Since you have only one element with that class. If you have more, iterate over them

在javascript中更改鼠标上的图像

1 个答案: