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

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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

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">
<!--
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 :(
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

titou
Gecko
Messages : 61
Enregistré le : 04 sept. 2003, 00:55

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
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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.
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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.. :roll:
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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 ? :?
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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">
<!--
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
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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

Romuald > ton test ne marche pas sur IE chez moi ;)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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 !
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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">
<!--
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..
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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 :P
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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..
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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.
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

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 :(
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Romuald
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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

Merci.
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité