1

このウェブサイトのヘッダーの上にメニューを表示しようとしています。

これが私のjQueryです：

$("#header").mouseover(function() {
    $('#header_links').stop(true, true).show(400);
});

$("#header").mouseout(function() {
    $('#header_links').stop(true, true).hide(400);
});

ここに私のHTMLがあります：

<body>
<div id="header">
  <div id="header_title">leks kamihira&nbsp;</div>
  <div id="header_links">
  <a href="work.php">works</a>
  <a href="bio.php">bio</a>
  <a href="blog">blog</a>
  <a href="links.php">links</a>
  <?php
  if (isset($_SESSION['logged_in'])) { ?>
  <a href="admin">admin</a> 
  <a href="admin/logout.php">logout</a>
  <?php } ?>
  </div>
</div>

問題は、header_titlediv またはheader_linksdiv もホバーされるたびにheader_links消えることです。

div がメイン ヘッダー div 内に含まれている限り、mouseover と mouseout が正しく機能することを確認する方法はありますか?

4

1 に答える 1

4

mouseenter()とmouseleave( ) を使用できます。

$("#header").mouseenter(function() {
    $('#header_links').stop(true, true).show(400);
});

$("#header").mouseleave(function() {
    $('#header_links').stop(true, true).hide(400);
});

ここでjsFiddle。

との違いを示すmouseover()簡単なデモmouseenter()を次に示します。

@PSL前述のように、これを使用することもできます。

$("#header").on('mouseenter mouseleave',function() { 
   $('#header_links').stop(true, true).toggle(400); 
});
于 2013-05-22T21:01:20.717 に答える