1

わかりました、インデックスに表示する注目の絵画のリストがあります。データベースから詳細を取得するためにwhileループを使用してそれらを表示しています。

ユーザーが画像にカーソルを合わせると、その画像の div が表示される jQuery 効果を作成したいと考えています。

問題は、最初の div にカーソルを合わせた場合、最初の div は問題ありませんが、2 番目の 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 に答える