Page 1 sur 2
Afficher un calque en CSS : un truc bizarre avec a:hover
Publié : 24 sept. 2003, 23:17
par SIBELIUS
J'aimerais faire un Affichage/Masquage de calques sans javascript.
Je me suis donc inspiré des "popups CSS" d'Eric Meyer (
http://www.meyerweb.com/eric/css/edge/popups/demo.html )
Je me suis donc restreint au minimum et ça marche très bien partout... sauf sur IE !
Cependant, en testant le site d'Eric Meyer sur IE, il passe très bien.
J'ai donc testé une par une toutes les propriétés qui pouvaient intérférer et il se trouve que ça marche sur IE seulement si... je renseigne la pseudo classe a:hover d'une propriété background (même vide) !
Je trouve ça assez ahurissant. Est-ce un bug? Ai-je mal fait quelque chose ?
Voici le code. Vous pouvez tester comme vous le voulez : il FAUT un a:hover et IL FAUT un background !
<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>
<style type="text/css">
<!--
a {
text-decoration: none;
}
a:hover {
background: none;
}
a span {
display: none;
}
a:hover span {
display: block;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>
</head>
<body>
<a href="">afficher le calque<span>texte et images peuvent être placés ici</span></a>
</body>
</html>
Note : il parait que ça fonctionne sous IE5 et sur certaines versions de IE6 sans le a:hover {background...}
Mais sur ma version (IE 6.0.2800.1106 sp1), ça ne marche pas
Publié : 25 sept. 2003, 00:42
par titou
Je te confirme le même comportement chez moi à savoir que pour mon IE version 6.0.2600.0000IS il faut le a: hover avec le background
Par contre dans la page que tu cites en exemple il y a aussi un a: hover avec background: #AAA;
Publié : 25 sept. 2003, 01:35
par SIBELIUS
titou a écrit :Par contre dans la page que tu cites en exemple il y a aussi un a: hover avec background: #AAA;
Oui tout à fait, mais dans l'exemple c'est pour des raisons de choix graphique je suppose... je voulais pour ma part m'affranchir de background.
Publié : 25 sept. 2003, 22:38
par Romuald
Ton code marche chez moi, sous IE et Mozilla alors que j'ai la même version (sauf les derniers chiffres)
D'ailleurs j'ia remqrqué sous IE qu'avec about: on peut taper du code html dans la barre d'URL il est bizarre ce navigateur..
Publié : 25 sept. 2003, 22:42
par SIBELIUS
Romuald a écrit :Ton code marche chez moi, sous IE et Mozilla alors que j'ai la même version (sauf les derniers chiffres)
SANS le a:hover ?
Publié : 25 sept. 2003, 22:52
par Romuald
J'ai procédé à quelque changement qui font que..:
<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>
<style type="text/css">
<!--
a {
text-decoration: none;
}
a span {
display: none;
}
a:hover #1 {
display: block;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
a:hover #2 {
display: block;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: #acf;
text-align: center;
color: white;
}
-->
</style>
</head>
<body>
<a href="">Test 1<span id="1">Premier test avec une couleur</span></a><br />
<a href="">Test 2<span id="2">Second tests avec une couleur différente.</span></a>
</body>
</html>
Donc j'utilise le a:hover mais pour cause d'uilité public
Publié : 26 sept. 2003, 00:18
par SIBELIUS
Romuald > ton test ne marche pas sur IE chez moi
Publié : 26 sept. 2003, 00:35
par Romuald
Oui, en faite je viens de le remarquer (après mettre arracher les cheveux en l'implantant sur mon site..) il doit y avoir une alternative ou un bugàalacon à trouver..
Par contre le tient marche bien sous IE, du moins chez moi !
Publié : 26 sept. 2003, 01:00
par Romuald
ah! j'ai trouvé !
<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>
<style type="text/css">
<!--
a {
text-decoration: none;
}
a:hover {
font-size: 12px;
}
a span {
display: none;
}
a:hover #1 {
display: block;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
a:hover #2 {
display: block;
position: absolute;
top: 200px;
left: 100px;
width: 200px;
height: 100px;
background: #acf;
text-align: center;
color: white;
}
-->
</style>
</head>
<body>
<a href="">Test 1<span id="1">Premier test avec une couleur</span></a><br />
<a href="">Test 2<span id="2">Second tests avec une couleur différente.</span></a>
</body>
</html>
en gros dans le:
a:hover {
font-size: 12px;
}
il faut mettre une valeur quelconque, cela marche avec n'importe quel atribut valide..
Publié : 26 sept. 2003, 10:33
par SIBELIUS
Oui dans ce cas ça marche... c''est un peu ce que je dis au début : IL FAUT un a:hover défini explicitement pour que ça marche sur IE... c'est quand-même hallucinant, non ?
En tout cas, je trouve que c'est une technique qui remplace avantageusement les fonctions javascript (désactivées pour 13% des gens)
Autre variante de la technique :
http://www.alsacreations.com/articles/c ... smenu1.htm
Publié : 26 sept. 2003, 11:51
par Romuald
CV'est vrai que faire du css avec IE c'est marcher dans le brouillard avec une fausse carte, rien ne va..
Et le coup de devoir difinir un a:hover je pense qu'IE à besoin d'une actualisation dans la page pour faire fonctionner le pop up css..
En tout cas, ça peut donner des choses sympa (comme un texte d'aide, je m'en sers pour ça avec des définition de couleur différente pour le type d'aide, technique lexique etc..)
PS: Sous Mozilla on ne voit pas le dernier div
Publié : 28 sept. 2003, 13:14
par Romuald
Rha, j'arrive pas à l'afficher sous IE, pourtant j'utilise bien le hover.
[edit] Zut, je crois que j'ai parlé trop vite, j'édite sous peu..
Publié : 29 sept. 2003, 15:34
par Romuald
Quelqu'un peu me dire si il arrive à le faire fonctionner avec auter chose que les liens "a" ? J'essaye avec acronym mais sans succes.. Alors que sous Mozilla c'est au top.
Publié : 29 sept. 2003, 16:24
par SIBELIUS
Si tu parles des :hover , cette pseudo-classe ne marche QUE sur la balise <a> sur IE
Publié : 29 sept. 2003, 16:29
par Romuald
Grmbl, bon tant pis pour IE alors, de toute façon après j'ai un autre problème, fixed un div sur Ie pas simple.
Merci.