1

好的，我有一个特色绘画列表要在索引上显示。我正在使用 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>
4

2 回答 2

2

尝试这个：

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

于 2013-06-01T12:56:36.203 回答
0

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

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


从这里开始不要在选择器中使用“#”，使用“。” 选择类，而不是 id。

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

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

于 2013-06-01T13:05:34.330 回答