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

应该可以使用forEach执行此操作。像这样：

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

Answer 2

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

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

php生成的项目的图像叠加

2 个答案: