Question

我正在尝试使用纯JavaScript构建一个函数，以便从具有相同类的一组图像中更改当前悬停在图像上的图像源。以下代码没有任何反应：

<section id="imgs">
    <div class="boundary">
        <img class="cage" src="cage.png" height="150px" />
    </div>
    <div class="boundary">
        <img class="cage" src="cage.png" height="150px" />
    </div>
    <div class="boundary">
        <img class="cage" src="cage.png" height="150px" />
    </div>
    <div class="boundary">
        <img class="cage" src="cage.png" height="150px" />
    </div>

</section>

我的JavaScript功能：

<script language="JavaScript">

    var x = document.getElementsByClassName("cage");
    for (var i = 0; i < x.length; i++) {
        x[i].onMouseOver = function () {
            this.src = "cageF.png";
        }
    }

</script>

Answer 1

您需要照顾case sensitivity，使用onmouseover代替onMouseOver

var x = document.getElementsByClassName("cage");
    for (var i = 0; i < x.length; i++) {
        x[i].onmouseover = function () {
            this.src = "cageF.png";
        }
    }

Demo

Answer 2

我知道你已经回答了你的问题。看看下面的链接，更好地了解JavaScript。

JavaScript case-sensitive

JavaScript区分大小写并使用Unicode字符集。

JavaScript mouseover event

基于类名称 - JavaScript的当前悬停图像的图像更改

2 个答案: