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

3

CSS 解决方案：
您完全可以在没有 jQuery 的情况下处理这种情况。您只能通过简单的代码行来使用 CSS

.cp-thumb:hover .cp-hover { display:block; }

示例 - jsFiddle



jQuery解决方案：

它应该像这个例子一样写 - http://jsfiddle.net/zEJVK/

$(".box").hover(
     function() {
         $(".box2").show() 
     }, 
     function() {
         $(".box2").hide();
     }
);

更新：我已经更新了代码，取决于结构是什么，您可以使用$(this) 示例 - http://jsfiddle.net/zEJVK/1/

此示例选择最接近div悬停的元素并显示它。您可以使用childrenorparent和熟悉的函数方法来显示您的相关元素。

另一个更新： http:
//jsfiddle.net/zEJVK/3/
如果拇指元素是父元素，则应使用children方法，示例已发布

$(".cp-thumb").hover(
    function() {
        $(this).children(".cp-hover").show();
    }, 
    function() {
        $(this).children(".cp-hover").hide();
    }
);
于 2013-09-04T07:55:53.833 回答
1

尝试这个。

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

您可以使用 jquerymouseenter()和mouseleave()

$(".cp-thumb").mouseenter(function(){
    $(".cp-hover").show();
});

$(".cp-thumb").mouseleave(function(){
    $(".cp-hover").hide();
});
于 2013-09-04T07:51:43.017 回答
0

你可以使用

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

    
        $("body").delegate(".cp-thumb", "hover",         
              功能 （） {
                $(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 回答
0

您需要使用相对查询来查找cp-hover，在这种情况下，您需要找到cp-hover作为悬停元素的子元素的cp-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

这是一个例子：http: //jsfiddle.net/J43X6/

在你的脚本中，你应该用

$( document ).ready(function() {
    // Your code here
});
于 2013-09-04T08:43:38.337 回答