中身のないboxにonmouseoverのイベントを設定する際の注意

JavaScript CSS

前にひっかっかたのを忘れてまたもやひっかかってしまう注意点がこれ。
WinIE6で再現。

  • CSSでwidth、heightを明示したボックスでも、要素の中身が空だと、onmouseover等のイベントが発生しない
  • ただし、CSSでbackground-color or background-imageを正しく明示するとイベントは発生する

これ、ボックスにCSSのborderが設定されていてbackgroundがnoneの場合、borderの部分のみイベントが発生するから

動作が重いのかと勘違いしてしまい気づきにくい。
:hoverとかも似たような感じの動作をするから、

onmouseover等というより、要素が空のボックスとWinIEのマウスイベント全般がこんな動作なのかも。
さて、backgroundを設定したくない場合、

解決策は、 WinIE独自実装のfilter:alphaを利用することです。

	background-color:#000; /* 色は何でも */
	filter:alpha(opacity=0);

ただし、

  • filter:alphaはbackground-colorの他、borderにも適用される
  • 印刷はfilter:alphaが無効なので、不透明な状態で出力される

などの仕様になっているようなので、注意！