Question

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

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

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

脚本

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

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>

Answer 1

试试这个：

  $(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>

示范：http://jsfiddle.net/UHXqd/

Answer 2

您尝试做的事情很容易实现：基本上将$("#details").fadeOut();更改为$(this).siblings("#details").fadeOut();。但是你的代码还有其他问题：你有多个具有相同ID的domElements，非常不幸的是，ID应该是唯一的。我的建议：将回声改为

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

从此处不要在选择器中使用'＃'，使用'。'选择课程，而不是ids。

$(".featuredImage img").hover(function(){
  $(this).siblings(".details").fadeOut();
});

您应该使用siblings（），因为details-div与图像处于同一级别。

循环中的PHP中的jQuery效果

2 个答案: