Afficher un calque en CSS : un truc bizarre avec a:hover
Afficher un calque en CSS : un truc bizarre avec a:hover - HTML/CSS - Programmation
Marsh Posté le 24-09-2003 à 22:48:56
Personne ne veut jouer avec moi ? 
Pour info, 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 
Message édité par sibelius le 24-09-2003 à 23:14:25
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 25-09-2003 à 01:53:05
Un bloc dans un élément en-ligne ?
Et si tu essayes de positionner l'élément <a> ?
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-09-2003 à 02:01:15
"Un bloc dans un élément en-ligne ?"
>>> il passe en display: block donc ne reste pas en-ligne.
C'est le même principe que les liens de ce style :
a {
display : block;
width.. height.. border ...
}
... mais appliqué à <span>
(d'ailleurs ça marche aussi avec <div>, mais ça ne règle pas le problème)
"Et si tu essayes de positionner l'élément <a> ?"
>>> non, en rajoutant position: absolute; au <a>, ça ne résoud pas le problème non-plus
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 25-09-2003 à 13:18:24
Désolé pour le 
, mais vous ne trouvez pas ça curieux ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 25-09-2003 à 14:17:10
| SIBELIUS a écrit : Personne ne veut jouer avec moi ? |
Moi ça marche aussi sur IE (même numéro de version)
Marsh Posté le 25-09-2003 à 18:03:24
| fastclemmy a écrit : |
ça marche SANS le a:hover ??? (car c'est bien ça la question)
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 25-09-2003 à 19:18:36
| SIBELIUS a écrit : "Un bloc dans un élément en-ligne ?" |
C'est bien ce que je lui reproche : quand on est dans l'état a:hover, <span> devient un bloc, mais il est contenu dans un élément <a> qui est un élément en-ligne. C'est interdit. Un petit "position: relative;" sur <a> résout le problème.
Enfin bon c'est pas très grave, je fais juste mon difficile 
Bon sinon j'ai bien l'impression que c'est un bug... D'ailleurs si on remplace "background: none" par "background-color: transparent;" dans a:hover, il se passe des choses assez amusantes
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-09-2003 à 20:09:47
Reply![[:rofl]](https://forum-images.hardware.fr/images/perso/rofl.gif "[:rofl]")
Marsh Posté le 25-09-2003 à 22:38:15
| gm_superstar a écrit : |
OK, une positionnement relati ou absolu, ou un display: block sur le <a> résoud ce pb, mais c'est tout de même curieux pour le background ! 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 26-09-2003 à 01:04:07
IE6 est bugé j'usquà la moelle. Je n'étonne toujours de voir des différences de comportement alors que c'est le même numéro de version.
---------------
mon blog : http://www.magnin-sante.ch/journal/
Sujets relatifs:
- [CSS] Colonnes et IE
- formulaire: afficher le contenu des champs dans une fenetre a part!
- Problème avec le truc javascript qui imite target="_blank"
- [CSS] plaçer une image en bas à gauche d'une div ?
- [CSS ] :: Mise en page pour l'impression
- loader & afficher un menu JS avant le reste de la page ?
- Afficher la source du menu suivant:
- [HTML] je m'arrache les cheveux avec une CSS !!
- Hack CSS pour @import ?
- Passer mon site en XHTML + CSS : Petits problèmes
Marsh Posté le 24-09-2003 à 18:37:07
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>
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com