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