PHP While循环中的jQuery效果

好的，我有一张在索引上展示的特色画的清单。 我使用while循环来显示它们，以从数据库中获取详细信息

我想创建一个jQuery效果，当用户将鼠标悬停在图像上时，该图片的div就会出现

问题是，如果我在第一个上悬停，第一个的div是可以的，但是如果我悬停并离开第二个，它会影响第一个。代码如下：

剧本

<script>
  $(document).ready(function(){
    $("#featuredImage img").hover(function(){
    $("#details").fadeOut();
   });
  });
</script>

$（文档）.ready（函数（）{
$（“#featuredImage img”）.hover（函数（）{
$（“#详细信息”）.fadeOut（）；
});
});

PHP而

<ul id="featured">
 <?php
  $result = mysqli_query($con,"SELECT * FROM paintings WHERE featured=1");
   while($row = mysqli_fetch_array($result))
    {
     $id = $row['id'];
     $name = $row['name'];
     $desc = $row['longDesc'];
     $cost = $row['cost'];
     $qty = $row['quantity'];
     $img = $row['imageFilename'];
     $type = $row['type'];
     echo "
      <li id='featuredImage'>
      <div id='featuredImage'><div id='details'>$name</div><img src='/$img'></div>
      </li>";
    }
 ?>
</ul>

试试这个：

  $(document).ready(function(){
    $(".featuredImage img").hover(function(){
    $(this).siblings(".imgDetails").fadeOut();
   });
  });

ID是唯一的，请使用类来匹配上面的代码。。。大概是这样的：

  <li class='imageWrap'>
  <div class='featuredImage'><div class='imgDetails'>$name</div><img src='/$img'></div>
  </li>


$name


演示：
您的尝试很容易实现：
基本上更改
$（“#详细信息”）.fadeOut（）
到
$（this）.this.slides（#details”）.fadeOut（）。
但您的代码也有其他问题：
您有多个家庭成员具有相同的ID，非常不幸的是，ID应该是唯一的。
我的建议是：将回音改为

<li class='imageContainer'>
  <div class='featuredImage'><div class='details'>$name</div><img src='/$img'></div>
</li>

您应该使用sides（），因为details div与图像处于同一级别。
1<代码>id
在整个文档中是唯一的；2.你不需要js，CSS就足够了。我想要宽度放大的动画，这就是CSS转换的目的。CSS转换在30%的浏览器中不起作用。因此，除非你不在乎20%，否则它并不真正被推荐用于实际生产
$(".featuredImage img").hover(function(){
  $(this).siblings(".details").fadeOut();
});