php - 将鼠标悬停在照片上时获取有关照片的详细信息

Question

我正在构建一个页面，其中从数据库检索的各种图像显示在两列上。我想要的是，每当我将鼠标悬停在图像上时，是否会显示从同一数据库中提取的每张图像的一些详细信息(例如，国家和拍摄年份)，如图所示 here .

这是我的代码:

HTML:

<!-- Photo Library -->
<div class="content">
  <div class="row"> 
   <div class="column">
    <?php 
    include("getimg.php");
    ?>
   </div>
  </div>
</div>

PHP:

<?php
$query = "SELECT * FROM photos ORDER BY id  DESC";
$result = mysqli_query($mysqli, $query);

while($photo = mysqli_fetch_assoc($result)) {

echo '<img id="myimg" src="'. $photo['photopath'] .'" 
alt="'.$photo['photoname'].'"height:"500"  width="640">'; } 
?>

CSS:

.content {
background-color: #e8d9d9;
}

.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 18px;
}

.column {
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 4 4px;
}

.column img {
margin-top: 8px;
margin-left: 8px;
vertical-align: middle;
}

.column img:hover {
opacity: 0.5;
}

我试图准确地模仿这里所说的 https://jsfiddle.net/govdqd8y/ ，像这样:

<div class="column">
  <?php 
  include("getimg.php");
  ?>
  <div class="img__description_layer">
  <p class="img__description"> (whatever text) </p>
  </div>
</div>

但什么也没发生。

我能做什么？

Answer 1

即使您的 css 示例在 Safari 浏览器中不起作用(至少对我而言)，这也是一种快速而肮脏的解决方案。不过，我建议您查看 MVC pattern分离 HTML + PHP 代码。

<?php
$query = "SELECT * FROM photos ORDER BY id  DESC";
$result = mysqli_query($mysqli, $query);

while($photo = mysqli_fetch_assoc($result)) {

    echo '<div class="img__wrap">';
    echo '<img id="myimg" class="img__img" src="'. $photo["photopath"] .'" alt="'.$photo["photoname"].'" height="500"  width="640">'; 
    echo '<div class="img__description_layer">';
    echo '<p class="img__description">'.$photo["photoname"].'</p>';
    echo '</div>';
    echo '</div>';
} 
?>