0

嗨，我正在尝试在第二个 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

4 回答 4

3

您需要使用next而不是find作为 find 用于后代，并且您所需的元素不是后代。

现场演示

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

如果只有单个元素具有类，则可以避免 nexttesttmpblock

$(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(".testtmpblock").hide();
      });
});
于 2013-11-13T06:40:39.543 回答
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 {}
于 2013-11-13T06:42:08.453 回答
1

尝试下一个（）

 $(document).on('mouseenter', '.tmpd', function () {
                $(this).next(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).next(".testtmpblock").hide();
            });
于 2013-11-13T06:41:16.553 回答
1 
 $(document).ready(function () {
        $('body').on('hover','.tmpd', function () {
            $(".testtmpblock").show();
        }, function () {
            $(".testtmpblock").hide();
        }
    );
 });
于 2013-11-13T06:42:17.250 回答