javascript - php 生成的元素的图像覆盖

Question

所以我的模拟商店有滚动效果，每个盒子的图像和信息都取自 .sql 文件和自动生成的部分。我也希望它涵盖每个部分。我可以对其进行硬编码，但这有点过于严苛了。

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

看到代码被硬编码为第一个元素，有点困惑如何让它适用于每个元素。

Answer 1

您不需要 JavaScript，只需使用 CSS 即可。

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