J'ai une page avec un film Flash 100% largeur/hauteur qui est recouvert de HTML. Oui, ce site est un casse-tête de meilleure pratique. L'un des recouvrements HTML est un div invisible que j'utilise comme "détecteur de magie". Il y a un élément qui glisse dedans/dehors sur la page, j'utilise le div invisible pour créer une "zone chaude" autour de cet élément, de sorte que l'élément glisse dedans/dehors quand la souris plane sur ce mystérieux div invisible magique. Le problème est que quand un div a derrière lui, et est invisible - où invisible signifie "pas de couleur de fond", pas "display: none" - IE7 ne détecte pas les survols. Dès que l'élément "invisible" a une couleur d'arrière-plan, IE7 le détecte.Détection du vol stationnaire sur des div invisibles superposés au format Flash dans IE7
Voici une démonstration du problème: http://lilleaas.net/woot/hoverdemo/. Cliquez sur la case grise Passez la souris sur la case de droite qui apparaît. Cliquez à nouveau sur la case la plus à gauche, puis essayez de passer la souris sur la case de droite (maintenant "invisible", pas de couleur d'arrière-plan, mais elle est toujours dans le dom, comme display: block.).
Ma question: est-il possible que IE7 détecte le survol même quand le div n'a pas de couleur de fond? PS: J'imagine que le suivi du X/Y de la souris est une alternative viable. Pour l'archivage, je colle également le code HTML en question ici. La page de démo que je suis en train de relier sera probablement arrêtée peu de temps après que ma question aura été répondue.
Le fichier SWF que j'utilise dans cet exemple est juste un film vierge.
<!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>
Super-génial! Merci :) –