Afficher un calque en CSS : un truc bizarre avec a:hover

SIBELIUS · Message par **SIBELIUS** » 24 sept. 2003, 23:17

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">

</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

titou · Message par **titou** » 25 sept. 2003, 00:42

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;

SIBELIUS · Message par **SIBELIUS** » 25 sept. 2003, 01:35

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.

Romuald · Message par **Romuald** » 25 sept. 2003, 22:38

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..

SIBELIUS · Message par **SIBELIUS** » 25 sept. 2003, 22:42

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 ?

Romuald · Message par **Romuald** » 25 sept. 2003, 22:52

J'ai procédé à quelque changement qui font que..:

<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>

<style type="text/css">

</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

SIBELIUS · Message par **SIBELIUS** » 26 sept. 2003, 00:18

Romuald > ton test ne marche pas sur IE chez moi

Romuald · Message par **Romuald** » 26 sept. 2003, 00:35

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 !

Romuald · Message par **Romuald** » 26 sept. 2003, 01:00

ah! j'ai trouvé !

<html>
<head>
<title>Afficher Masquer des calques sans javascript</title>

<style type="text/css">

</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..

SIBELIUS · Message par **SIBELIUS** » 26 sept. 2003, 10:33

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

Romuald · Message par **Romuald** » 26 sept. 2003, 11:51

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

Romuald · Message par **Romuald** » 28 sept. 2003, 13:14

~~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..

Romuald · Message par **Romuald** » 29 sept. 2003, 15:34

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.

SIBELIUS · Message par **SIBELIUS** » 29 sept. 2003, 16:24

Si tu parles des :hover , cette pseudo-classe ne marche QUE sur la balise <a> sur IE

Romuald · Message par **Romuald** » 29 sept. 2003, 16:29

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.

Geckozone

Afficher un calque en CSS : un truc bizarre avec a:hover

Afficher un calque en CSS : un truc bizarre avec a:hover

Qui est en ligne ?