如何在鼠标悬停第二个div上打开1 div?

时间:2013-11-13 06:39:42

标签: javascript jquery html

您好我正试图在鼠标悬停第二个div上打开一个div。 div 1默认显示为none,但当用户将鼠标悬停在div 2上时,将显示div 1。 但它不起作用。 我的代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

    <style>
        .testtmpblock{
            display: none;
            background-color: black;
            height: 100px;
            width: 100px;
        }
        .tmpd{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

    <script>
        $(document).ready(function () {
            $(document).on('mouseenter', '.tmpd', function () {
                $(this).find(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).find(".testtmpblock").hide();
            });
        });
    </script>
</head>
<body>
<div class="tmpd">
    kjkjkj
</div>
<div class="testtmpblock">
    data
</div>
</body>
</html>

div testtmpblock将在div tmpd的鼠标悬停时显示,但不起作用。

我也为它写了脚本。 我误解的任何指导?

4 个答案:

答案 0 :(得分:3)

您需要使用next而不是find,因为查找用于desendants,而您所需的元素不是后代。

<强> Live Demo

  $(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(this).next(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(this).next(".testtmpblock").hide();
      });
  });

如果只有单个元素具有类testtmpblock

,则可以避免使用next
$(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(".testtmpblock").hide();
      });
});

答案 1 :(得分:2)

如果div彼此相邻,则仅使用CSS执行此操作:

.testtmpblock {
  display: none;
}

.tmpd:hover ~ .testtmpblock {
  display: block;
}

如果你想为它设置动画,你可以使用CSS3过渡。

99%的时间你只能使用CSS,并且动画在转换时会更快。这都是关于如何处理标记的。如果你将隐藏元素作为一个子元素,那么它总是只用CSS来实现,例如:

<div class="tmpd">
  kjkjkj
  <div class="testtmpblock">
    data
  </div>
</div>

你可以使用这样的选择器:

.tmpd:hover .testtmpblock {}

答案 2 :(得分:1)

尝试 next()

 $(document).on('mouseenter', '.tmpd', function () {
                $(this).next(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).next(".testtmpblock").hide();
            });

答案 3 :(得分:1)

 $(document).ready(function () {
        $('body').on('hover','.tmpd', function () {
            $(".testtmpblock").show();
        }, function () {
            $(".testtmpblock").hide();
        }
    );
 });