position:absoluteを指定した空要素はhoverイベントが起こらない

jQueryを触っていて、position:absoluteを指定した空の要素のhoverイベントを使用したかったのですが、IEだとhoverイベントが起こらない。

Firefox3とChromeではちゃんとhoverイベントは起こります。
いろいろとイジっていると、background-colorを指定することでhoverイベントが起こるようになった。

こんなこと知らないよ、ふつう…

私は都合上、見えない空要素に対してhoverイベントを起こしたかったのでopacityを0にしたが問題なくイベントは起こってくれる。

background-colorを指定する以外にbackground-imageを指定してもhoverイベントが起こる。
不思議なことに指定する画像は実際に存在する必要がない。

CSSで表すとこんな感じです。

#target{
   position:absolute;
   background-color:#000;
   /*background-image:url('/dummy.png');*/
   width:100px;
   height:100px;
   filter:alpha(opacity=0);
   -moz-opacity:0;
   opacity:0;
}

これで『#target』にカーソルを合わせるとhoverイベントが起こってくれる。

ちなみにrelativeでは問題ないがfixedだとheightがなくなるようなので同じように対処したほうが良いようだ。

2 Comments:

匿名 さんのコメント...

通りすがりの者ですが、この情報、助かりました。

私の場合は、イベントが起こらないのではなく、
<li>親メニュ
<ul style="absolute">
<li>サブメニュ1</li>
<li>サブメニュ2</li>
</ul>
</li>
みたいな構造の時に 親li に対してhover(over:ulのshow、out:ulのhide)をさせようとすると、すぐにoverイベントが起こってしまって、サブメニュー10くらいになるとなかなか辿りつけない...すぐ消えてしまう...という現象でした。
absoluteなulの下に別の要素があるため、overが発生していたのだろう、一方、background-colorを指定することで、absoluteなulの下が見えなくなったため、解消したのだろう、と推測しています。

いずれにしてもありがとうございました。

y@s さんのコメント...

なるほど。

つまり hover(mouseover) イベントは一番上にある要素だけを対象とし、下にある要素の hover(mouseover) イベントは起こらない。
上側に当たる要素に background-color を指定することで下にある要素の hover(mouseover) イベントは起こらなくなるということか。

参考となるコメントを頂きありがとうございます。

Recent Posts