0

この質問は以前に尋ねられたに違いないように感じますが、答えを見つけるための正しい用語を知らないはずです。

ヒットエリアとして機能するtransparentdivがあります。ユーザーがこの領域にカーソルを合わせると、メニューバーが画面に表示されます。問題は、カーソルがこのメニューに移動すると、メニューを非表示にするアニメーションが開始されることです。カーソルがその上にあることを感知しません。ヒット領域のz-indexをメニューより高くすることでこれを修正できますが、メニューボタンをクリックできません。

これが私のコードです。何か案は？

http://jsfiddle.net/92dYt/1/

CSS

#menu{
  position:fixed;
  top:-40px;
  left:0px;
  width:100%;
  height:40px;
  background-color:#000;
  z-index:50;
}​
#hitarea{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:150px;
  background-color:#eee;
  z-index:49;
  opacity:0;
}

HTML

<div id="menu"></div>
<div id="hitarea"></div>

JAVASCRIPT

$("#hitarea").hover(
    function () {
        $('#menu').delay(500).animate({
            top: 0
          }, 500, function() {
            // Animation complete.

        }); 
    }, 
  function () {
    $('#menu').delay(500).animate({
        top: -40
      }, 500, function() {
        // Animation complete.

    }); 
  }
);
4

1 に答える 1

1

メニューの背景としてヒット領域をネストし、ホバーの代わりにmouseenterを使用して独自のホバー動作をコーディングすることをお勧めします。

http://api.jquery.com/mouseenter/

この例から、mouseoverはすべての子オブジェクトに対して起動し、mouseenterは1回だけ起動することがわかります。（ネストされている場合でも、ソリューションはホバーでも機能する可能性があります。）

于 2012-06-10T07:01:25.437 に答える