JavaScript loop doesn't work

Question

I am a beginner and I am trying to override that the :hover pseudo-class in CSS doesn't let me trigger an event if the element that I am hovering over is below some other element.

If I hover over the div, the css transition kicks in, however, if I go over the text that is visually above the div, nothing happens.

I have four such elements, so I was trying to use getElementsByClassName to create the array to be iterated in JavaScript, but the console gives me always the same error of

    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>

What am I doing wrong?

Answer 1

This one is quite simple... you missed an opening curly-brace on your for loop:

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

I have used box.length as you already have the array of elements too.

Your original code:

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

Seems like a scoping issue. Try moving your box and skills variable declarations inside the stretch and stretchback functions.

Answer 3

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

Answer 4

You may want to avoid variables from overwriting, like below. Happy to elaborate if below code helps

on 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";
    }
}