image overlay for php generated items

Question

So I have a roll over effect for my mock store, the images and info for each boxes are taking from .sql file and auto generated sections. I want it too cover each section. I could hard code it, but that's a little too draconian.

   <div id="scoll" class="group">
                <div class="container"> 
                    <div class="center_items">


                 <?php
        //external pages area
        include_once('config\database.php');
        include_once('object/chair.php');
        $database = new Database();
        $conn = $database->getConnection();
        $chair = new Chair($conn);
        $stmt = $chair->readAll();
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            ?>

            <div class="product_box" >


            <img src="img/<?php echo $row['THUMB']; ?>" alt="chair_image"> </a>
            <h4><a href="movies-details.php?detailsid=<?php echo $row['ID'];?>"> <?php echo $row['chair_name'];?></a> </h4>
            <p>$<?php echo $row['PRICE'];?></p>
            <div class="buy-box-shadow group">
            <a href="chair-details.php?detailsid=<?php echo $row['ID'];?>" class="btn">Buy me!</a>
            </div>

        </div>
        <?php
        }
        ?>


                    </div>
                </div>              
            </div>


JS

    onload=init;

    function init() {
    document.getElementsByClassName("product_box")[0].onmouseover = function(e){
            e.preventDefault(); 
            mouseOver();
        }
    document.getElementsByClassName("product_box")[0].onmouseout  = function(e){
            e.preventDefault(); 
            mouseOut();
        }

    function mouseOver() {
        document.getElementsByClassName("buy-box-shadow")[0].style.opacity = .9;
    }

    function mouseOut() {
        document.getElementsByClassName("buy-box-shadow")[0].style.opacity = 0;
    }

See the code is hard coded to be the first element, a tad confused on how to make it go for every element.

Answer 1

You don't need JavaScript for that, you can do it just with CSS.

.product_box .buy-box-shadow {
    opacity: 0.9;
    display: none;
}
.product_box:hover .buy-box-shadow {
    display: block;
}

Answer 2

Should be able to do this with forEach. Like so:

function init() {
var product_boxes = document.getElementsByClassName("product_box");
product_boxes.forEach(function(currentValue, index, array){
    currentValue.onmouseover = function(e){
        e.preventDefault(); 
        mouseOver();
    }
});