Question

我有一个显示多个图像的页面，当悬停时，某些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>

输出：

enter image description here

Answer 1

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/

此示例选择与hovered元素最接近的div并显示它。您可以使用children或parent以及熟悉的函数方法来显示相关元素。

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

$(".cp-thumb").hover(
    function() {
        $(this).children(".cp-hover").show();
    }, 
    function() {
        $(this).children(".cp-hover").hide();
    }
);

Answer 2

试试这个。

$(document).ready(function() {
    $(".cp-thumb").hover(
      function () {
        $(".cp-hover").show();
      }, 
      function () {
        $(".cp-hover").hide();
      }
    );
});

Answer 3

您需要使用相对查询来查找cp-hover，在这种情况下，您需要找到cp-hover元素，该元素是悬停的cp-thumb元素的子元素

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

Answer 4

您可以使用jquery mouseenter()和mouseleave()

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

$(".cp-thumb").mouseleave(function(){
    $(".cp-hover").hide();
});

Answer 5

你可以用

来做


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

    
        $("body").delegate(".cp-thumb", "hover",         
              function () {
                $(this).find(".cp-hover").show();
              }, 
              function () {
                $(this).find(".cp-hover").hide();
              });
    

    
        $("body").on("click", ".cp-thumb",         
              function () {
                $(this).find(".cp-hover").show();
              }, 
              function () {
                $(this).find(".cp-hover").hide();
              });

您还可以从以下位置查看： http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

Answer 6

以下是一个示例：http://jsfiddle.net/J43X6/

在你的脚本中，你应该用

包装你的函数

$( document ).ready(function() {
    // Your code here
});

悬停以显示/隐藏div

6 个答案: