У меня есть страница со 100% флэш-фильмом ширины / высоты, наложенная на HTML. Да, этот сайт - лучший метод взлома.
Одним из оверлеев HTML является невидимый div, который я использую как «детектор магии». На странице есть элемент, который скользит внутрь / наружу, я использую невидимый div, чтобы создать «горячую область» вокруг этого элемента, так что элемент будет скользить внутрь / наружу, когда мышь наводит этот невидимый магический невидимый div.
Проблема в том, что когда у div есть вспышка позади него, и он невидим - где невидимость означает «нет цвета фона», а не «display: none» - IE7 не обнаруживает зависания на нем. Как только «невидимый» элемент имеет цвет фона, IE7 обнаруживает его.
Вот демонстрация проблемы: http://lilleaas.net/woot/hoverdemo/. Нажмите на серое поле. Наведите указатель на правую коробку, которая появляется. Снова щелкните крайнее левое поле, а затем попробуйте навести курсор на правое поле (теперь «невидимое», без цвета фона, но оно все еще в домене, как display: block.).
Мой вопрос: возможно ли, чтобы IE7 обнаружил зависание, даже если у div нет цвета фона?
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>