Question

我试图为我的php元素开发鼠标效果。它是一个商店，我只是想在自动生成的php区域上显示透明div。它只是设置为显示块，以便能够看到它是否能正确显示。它只出现在图像和文本下方。

的HTML / PHP

        <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" >
        <div class="buy-box-shadow">
        <!--   <div class="buy-product">-->
        <a href="chair-details.php?detailsid=<?php echo $row['ID'];?>"> <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>
    </div>
    <?php
    }
    ?>
 <!--  </div>buy product-->

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

CSS

.center_items{
    width:74%;
    margin:0 auto;  

}
.product_box{
    width:200px;
    float:left;
    margin: 4.5em 5%;
    box-shadow:0px 6px 16px #888888;
}

.product_box img{
    width:100%;
    height:200px;
}

.static-nav{
    height:200px;
    background-color:white;

}
.buy-box-shadow{
    background-color:black;
    z-index:100;
    display:block;


}

Answer 1

悬停的div需要位于底部并同时关闭。您无法使用背景颜色，但可以使用图像。

.buy-box-shadow{
    opacity: .6;
    filter: alpha(opacity=0);
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 50%;
    background: transparent url('img/Untitled-2.gif');
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    z-index: 100;
    transition: all 0.3s ease-in-out;


}

在php对象上{onmouse

1 个答案: