JavaScript循环无效

Question

我是一个初学者，我想覆盖一下CSS的:hover伪类，如果我悬停的元素低于其他元素，则不会触发事件。

如果将鼠标悬停在div上，将启动css过渡，但是，如果我经过div上方视觉上的文本，则什么也不会发生。

我有四个这样的元素，因此我试图使用getElementsByClassName创建要在JavaScript中进行迭代的数组，但控制台始终给我相同的错误

    index.html:77 Uncaught TypeError: Cannot read property 'style' of 
    undefined
    at stretchback (index.html:77)
    at HTMLParagraphElement.onmouseout (index.html:24)
    stretchback @ index.html:77
    onmouseout @ index.html:24

<script>
    var boxes = document.getElementsByClassName('skill-box');
    function stretch() {
    for (var i=0; i < boxes.length; i++)
    boxes[i].style.opacity = "0.3";
    boxes[i].style.transform = "scaleY(10)";
    boxes[i].style.borderRadius = "0px";
    boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
        }
    function stretchback() {
    for (var i=0; i < boxes.length; i++)
    boxes[i].style.opacity = "1";
    boxes[i].style.transform = "scaleY(1)";
    boxes[i].style.borderRadius = "10px";
    boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";               }
</script>

我究竟做错了什么？

Answer 1

这很简单...您错过了for循环中的花括号：

 for (var i=0; i < box.length; i++) { // <-- for example, here

我已经使用box.length因为您已经有了元素数组。

您的原始代码：

function stretch() {
for (var i=0; i < document.getElementsByClassName('skill-boxes').length; i++) // <-- OUCH
box[i].style.opacity = "0.3";
box[i].style.transform = "scaleY(10)";

Answer 2

似乎是一个范围界定问题。 尝试在拉伸和拉伸函数中移动框和技能变量声明。

Answer 3

如何使用addEventListener（'mouseenter'）而不是将css悬停。

Answer 4

您可能想要避免变量被覆盖，如下所示。 如果下面的代码有帮助，请详细说明

在jsbin上

function stretch() { // maybe call this expand?
    var boxes = document.getElementsByClassName('skill-boxes');
    var skills = document.getElementsByClassName('para');

    for (var i=0; i < boxes.length; i++) {
        boxes[i].style.opacity = "0.3";
        boxes[i].style.transform = "scaleY(10)";
        boxes[i].style.borderRadius = "0px";
        boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
    }
}

function stretchback() { // maye call this shrink?
    var boxes = document.getElementsByClassName('skill-boxes');
    var skills = document.getElementsByClassName('para');

    for (var i=0; i < boxes.length; i++) {
        boxes[i].style.opacity = "1";
        boxes[i].style.transform = "scaleY(1)";
        boxes[i].style.borderRadius = "10px";
        boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
    }
}