0

複数の画像を表示するページがあり、ホバーすると、一部の div に画像の上に表示される情報が含まれます。ループしてディレクトリから画像を表示します。

ホバーを処理するために jquery を使用しましたが、効果が表示されません。誰でも助けることができますか？

html/php

<?php
//to show remaining images by looping
$dir = dir("images");
while($filename=$dir->read()) {

    if($filename == "." || $filename == ".." || $filename == $first_image) continue;

     echo "<div class='cp-thumb'>";

     echo "<div class='cp-hover' style='display: none;' ><div class='cpHover-bg'></div>
            <div class='cpHover-info'><p class='text11'>".$newDatetime."</p><p class='text10'>".$caption."</p></div></div>"; 
     echo "<img src='images/".$filename."'class='img_235x235' />
     </div>";

jquery:

<script>
    $(".cp-thumb").hover(
          function () {
            $(".cp-hover").show();
          }, 
          function () {
            $(".cp-hover").hide();
          }
        );
</script>

出力：

ここに画像の説明を入力

4

6 に答える 6

1

これを試して。

$(document).ready(function() {
    $(".cp-thumb").hover(
      function () {
        $(".cp-hover").show();
      }, 
      function () {
        $(".cp-hover").hide();
      }
    );
});
于 2013-09-04T07:50:36.973 に答える
0

を見つけるには相対クエリを使用する必要があります。この場合、ホバーされた要素の子である要素cp-hoverを見つける必要がありますcp-hovercp-thumb

<script>
    $(".cp-thumb").hover(
          function () {
            $(this).find(".cp-hover").show();
          }, 
          function () {
            $(this).find(".cp-hover").hide();
          }
        );
</script>
于 2013-09-04T07:50:49.037 に答える
0

あなたはそれを使用してそれを行うことができます

    
        $(".cp-thumb").live('hover',function () {
                $(this).find(".cp-hover").show();
              }、
              関数 （） {
                $(this).find(".cp-hover").hide();
              }
         );
    

    
        $("body").delegate(".cp-thumb", "ホバー",         
              関数 （） {
                $(this).find(".cp-hover").show();
              }、
              関数 （） {
                $(this).find(".cp-hover").hide();
              });
    

    
        $("body").on("クリック", ".cp-thumb",         
              関数 （） {
                $(this).find(".cp-hover").show();
              }、
              関数 （） {
                $(this).find(".cp-hover").hide();
              });

から確認することもできます: http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

于 2013-09-04T08:08:03.517 に答える