悬停 JS/PHP 时更改 img src 属性答案

【问题标题】：Change img src attribute when hovered JS / PHP悬停 JS/PHP 时更改 img src 属性
【发布时间】：2018-09-19 01:47:54
【问题描述】：

我有注册的用户列表

表：ch_users

我的 PHP 代码旨在选择所有用户并获取。

ch_user 包含（userId、name、quote、position、thumbnail、hover_image）

我想要实现的是每当用户悬停特定图像时。将出现另一幅图像。

这是我当前的代码。

 <div id="gallery-container1">
 <div class="row-content1">
 <?php
            try{
            $connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
            $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $query = "SELECT * FROM ch_users";
            $data = $connect->query($query);
            foreach($data as $instructor_row){
            ?>


            <div class="img-container1">
              <div class="img-content1">
                  <a href="#">
                    <img src="img/instructors/<?php echo $instructor_row['thumbnail'];?>" />
                    </a>
                </div>
            </div>


            <?php
                    }//end of foreach
                }//end of try
                catch(PDOException $error)
                {
                    $error->getMessage();
                }
                ?>

  <div class="clearfix"></div>

  </div>


  </div>

CSS：

#gallery-container1{

margin-top:15vh;
text-align:center;
margin-bottom:10vh;
}
.img-container1 {
width:16.5%;
display:inline-block;
margin-bottom:30px;
}
.img-content1 {
padding:0;
height:auto;
overflow:hidden;
box-shadow:0 .8px .8px #ccc;
width:80%;
 }

.img-content1 img {
 width:100%;
 height:auto;
 }

 .clearfix {
 clear:both;
  }

  @media only screen and (max-width: 560px) {
 .img-container1 {
 width:98%;
 margin-left:10%;
 } 
 }

 @media only screen and (min-width: 600px)and (max-width: 900px) {
 .img-container1 {
  width:38%;
  padding:1%;
 } 
  }

我一直在关注一些主题。主要是为了改变一个img的属性SRC。 JS是合适的方式。所以我想出了这段代码的想法。但我不知道如何实现。

<script>
 function hover(element) {
 element.setAttribute('src', 'img/instructor/5h.jpg');
 }

  function unhover(element) {
 element.setAttribute('src', 'img/instructor/5.jpg');
 }
</script>

 <div class="img-container1">
  <div class="img-content1">
    <a href="#">
      <img src="img/instructor/<?php echo $instructors_row['thumbnail'];?>" onmouseover="hover(this);" onmouseout="unhover(this);" />
     </a>
  </div>
</div>

$instructor_row["hover_image"]; 是一个包含图像的字段，只要用户将鼠标悬停在获取的图像上，就会出现该图像。

【问题讨论】：

标签： javascript php html css

【解决方案1】：

您可以在不使用 Javascript 的情况下实现此目的。试试下面的方法：

PHP：

<div class="img-container1">
  <div class="img-content1">
    <a href="#">
      <img src="img/instructors/<?php echo $instructor_row['thumbnail'];?>" class="thumbnail">
      <img src="img/instructors/<?php echo $instructor_row['hover_image'];?>" class="hover-image">
    </a>
  </div>
</div>

CSS：

.img-content1 > img.hover-image,
.img-content1:hover > img.thumbnail {
  display: none;
}
.img-content1:hover > img.hover-image {
  display: block;
}

渲染两张图片并隐藏其中一张。
在父容器悬停时切换显示它们。

【讨论】：