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>サブメニュ１</li>
<li>サブメニュ２</li>
</ul>
</li>
みたいな構造の時に 親li に対してhover(over：ulのshow、out：ulのhide)をさせようとすると、すぐにoverイベントが起こってしまって、サブメニュー１０くらいになるとなかなか辿りつけない...すぐ消えてしまう...という現象でした。
absoluteなulの下に別の要素があるため、overが発生していたのだろう、一方、background-colorを指定することで、absoluteなulの下が見えなくなったため、解消したのだろう、と推測しています。
いずれにしてもありがとうございました。
なるほど。
つまり hover(mouseover) イベントは一番上にある要素だけを対象とし、下にある要素の hover(mouseover) イベントは起こらない。
上側に当たる要素に background-color を指定することで下にある要素の hover(mouseover) イベントは起こらなくなるということか。
参考となるコメントを頂きありがとうございます。
コメントを投稿