php - PHP While 循环中的 jQuery 效果

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/