Javascript 如何在鼠标悬停第二个div时打开1个div？_Javascript_Jquery_Html

Javascript 如何在鼠标悬停第二个div时打开1个div？

javascript jquery html

Javascript 如何在鼠标悬停第二个div时打开1个div？,javascript,jquery,html,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> <styl

嗨，我想在鼠标悬停的第二个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>


在此处插入标题
.testtmpblock{
显示：无；
背景色：黑色；
高度：100px；
宽度：100px；
}
.tmpd{
高度：100px；
宽度：100px；
背景颜色：蓝色；
}
$（文档）.ready（函数（）{
$（document）.on（'mouseenter'，'.tmpd'，函数（）{
$（this.find（“.testtmpblock”）.show（）；
}).on（'mouseleave'，'.tmpd'，函数（）{
$（this.find（“.testtmpblock”）.hide（）；
});
});
KJKJ
数据

div testtmpblock

将出现在

div tmpd

的悬停位置，但它不工作

我还为它写了脚本。

有没有关于我错在哪里的指导？

您需要使用

next

而不是

find

，因为find用于desendant，并且您所需的元素不是后代

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

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

如果只有单个元素具有类

testtmpblock

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

试试

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

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

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

.testtmpblock {
  display: none;
}

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

如果要设置动画，可以使用CSS3变换

99%的时间里，你只能使用CSS，而动画在转换时会更快。关键在于如何处理标记。如果将隐藏元素设为子元素，则仅使用CSS即可实现，例如：

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

它在最后一行显示了一个错误，发现了多个注释。这对我来说很有用。我也试过小提琴。非常感谢你，先生。现在我将在hover上显示的div中调用servlet。先生，您知道怎么做吗？不客气，您需要使用ajax您可以尝试使用jQuery ajax，这可能会有所帮助，@elclanrs-这也很好。。简直太棒了，显示了代码优化。也谢谢您。@Adil-先生，您使用TeamViewer吗？你的代码可以在fiddle上运行，但当我在我的pc上尝试时，它不起作用。检查你的页面中是否包含jQuery？