Question

$count = $result->rowCount();
echo '<div class="container">';
while($count>0)
{


    echo '<div class="row">';
    $i=0;
    while($i<3)
    {
      $row = $result->fetch(PDO::FETCH_ASSOC);
        echo '<div class="col-sm-4">';
        echo '<div class="card mt-4">';
        echo '<div class="card-body" style="width:350px;height:350px"><a href="auctionDetails.php?id=';
        echo $row['code'];
        echo '"><img src="../';
        echo $row['imageurl'];
        echo '" class="img-responsive" style="width:100%;height:100%" alt="Image">';
        echo '</a></div><div class="card-footer">';
        echo mb_strimwidth($row['name'],0,28,"...");
        echo '<button type="button" class="btn btn-outline-dark pull-right" id="likebutton" vale="'.$row['code'].'"><i class="fa fa-gavel"></i></button></div></div></div>';
        $i++;
        $count--;
    }
    echo '</div>';

我想在图像中设置带有悬停效果的box-shadow。 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); sample

如果没有外部css，将不胜感激。

Answer 1

您无法在HTML标记内添加伪类，但您可以将它们添加到<style>...</style>标记的同一文件中。

像这样：

<head>
  <style>
    img:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
  </style>
</head>

Answer 2

如果您在不想要效果的同一页面上有其他图像，请创建课程并添加您想要效果的地方

将“shadow”命名类添加到您的图像

 class="img-responsive shadow"

然后是风格

<style type="text/css">
.shadow:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,   0.19);
}
</style>

如何在图像中设置具有悬停效果的阴影效果？

2 个答案: