0

こんにちは、2 番目の div のマウス ホバーで 1 つの div を開こうとしています。div 1 はデフォルトでは表示されませんが、ユーザーが 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

find が子孫に使用され、必要な要素が子孫ではないため、next代わりに使用する必要があります。find

ライブデモ

  $(document).ready(function () {
      $(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();
      });
});
于 2013-11-13T06:40:39.543 に答える