1

以下は、基本的な作業ドロップダウン メニューで、子は親のホバーに表示されます。

<script type="text/javascript">
  $(document).ready(function () { 
    $('#nav li').hover(
      function () {
      //show its submenu
        $('ul', this).stop().slideDown(100);
      }, 
      function () {
      //hide its submenu
        $('ul', this).stop().slideUp(100); 
      }
    );
  });
</script>

<style type="text/css">
  #nav li {background-color:#CCC; }
</style>

<ul id="nav">
  <li><a href="#" class="selected">Parent A</a>
    <ul>
      <li><a href="#">Item a1</a></li>
      <li><a href="#" class="selected">Item a2</a></li>
      <li><a href="#">Item a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Item b1</a></li>
      <li><a href="#">Item b2</a></li>
      <li><a href="#">Item b3</a></li>
      <li><a href="#">Item b4</a></li>
    </ul> 
  </li>
</ul>

現在、ホバーが親ボックスの領域 (つまり、テキストの外側、親 div の非表示領域) のどこかにあると、子のが表示されます。

親リンクのホバー時にのみ子を表示したい(「href」テキストのみ)。

答えはどこにも見つかりませんでした。

4

1 に答える 1

2

次のように、全体ではなくa要素をターゲットとして使用してみてください。hoverli

<script type="text/javascript">
  $(document).ready(function () { 
    $('#nav ul').hide();

    $('#nav li > a').hover(
      function () {
      //show its submenu
        $('ul', this.parentNode).stop().slideDown(100);
      }
    );
   $('#nav li').hover(null, 
      function (e) {
      //hide its submenu
        $('ul', this.parentNode).stop().slideUp(100); 
      }
   );
  });
</script>

動作デモを参照してください。

于 2012-12-10T16:27:58.077 に答える