2
HTMLでオーバーレイされた100％幅/高さのフラッシュムービーがあるページがあります。ええ、このサイトはベストプラクティスのブレーカです。IE7でオーバーレイされている目に見えないdivのホバーを検出します
HTMLオーバーレイの1つは、目に見えないdivで、私は「魔法探知器」として使用します。ページ上でスライドする要素がありますが、私は不可視divを使ってこの要素の周りに「ホットエリア」を作成し、マウスがこの不可解な魔法の目に見えないdivをホバリングしたときに要素がスライドイン/アウトします。
問題は、divの後ろにフラッシュがあり、目に見えない場合です。つまり、「表示されません」ではなく「背景色がありません」という意味です。IE7では、ホバーが検出されません。 "不可視"要素が背景色を持つとすぐに、IE7がそれを検出します。
問題のデモンストレーションは、http://lilleaas.net/woot/hoverdemo/です。灰色のボックスをクリックします。表示された右端のボックスにカーソルを移動します。一番左のボックスをもう一度クリックし、右のボックスをホバーしようとします（現在、「不可視」、背景色は表示されませんが、dom：display：blockとして表示されます）。
私の質問：divに背景色がない場合でもIE7にホバリングを検出させることは可能ですか？
PS：私はマウスのX/Yを追跡することが実行可能な選択肢であると考えています。
アーカイブの目的で、ここで問題のHTMLも貼り付けています。私の質問に答えられた後、私がリンクしているデモページが少しダウンしている可能性があります。
この例で使用しているSWFは空のムービーです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="swfobject.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#thing").hover(function(){
$("#debug").html("Hovered, via #thing");
}).click(function(){
$('#meh').toggleClass("colored");
});
$("#meh").hover(function(){
$("#debug").html("Hovered, via #meh");
});
});
swfobject.embedSWF("bg.swf", "main", "500px", "300px", "9.0.0", null, {}, {wmode: 'transparent'});
</script>
<style type="text/css" media="screen">
body{
margin:0;
}
#main{
position:absolute;
width:100%;
height:100%;
z-index:1;
}
#thing, #meh{
width:200px;
height:200px;
position:absolute;
z-index:2;
}
#thing{
left:0px;
background-color:#999;
}
#meh{
right:0px;
}
#meh.colored{
background-color:#666;
}
#debug{
position:absolute;
z-index:2;
bottom:1em;
background-color:#369;
}
</style>
<title>invisible hovers</title>
</head>
<body>
<div id="main"></div>
<div id="thing">
<p>Click to toggle color.</p>
<p>In IE7, when the right box is colored, hover is detected. When the right box isn't colored, hover is not detected.</p>
</div>
<div id="meh"></div>
<div id="debug"></div>
</body>
</html>
超素晴らしい！ありがとう:) –