javascript - 在javascript中更改鼠标悬停的图像

标签 javascript html onmouseover

我正在用 html 构建网页。当我将鼠标悬停在一个 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>

最佳答案

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 - 在javascript中更改鼠标悬停的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30482436/

相关文章:

javascript - 如何强制 Apache Tapestry 更新 javascript?

javascript - 识别多个脚本中的公共(public)变量

javascript - 在 Rails 中使用 JSONP 呈现多行 Javascript

javascript - 使用 CKEditor 以 HTML 格式发送电子邮件

javascript - 鼠标悬停时闪烁文本

javascript - 是否可以从 XML 数据生成 HTML 5 页面?

html - 如何让内容(主要是图像)根据 tumblr 上的窗口大小缩放或调整大小?

html - chrome 中 div 之间的奇怪空间

javascript - 图像 map 上的 onmouse Enter 和 onmouseleave 无法在 IE11 或 Edge 中正确触发,但可以在其他浏览器中使用

javascript - html 中的 onmouser 图像