Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1344 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°522458
sibelius
Vous êtes sûr ?
Posté le 24-09-2003 à 18:37:07  profilanswer
 

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 !  :pt1cable:  
 
 
<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
mood
Publicité
Posté le 24-09-2003 à 18:37:07  profilanswer
 

n°522752
sibelius
Vous êtes sûr ?
Posté le 24-09-2003 à 22:48:56  profilanswer
 

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  :heink:


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
n°522845
gm_superst​ar
Appelez-moi Super
Posté le 25-09-2003 à 01:53:05  profilanswer
 

Un bloc dans un élément en-ligne ? :heink:
 
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
n°522846
sibelius
Vous êtes sûr ?
Posté le 25-09-2003 à 02:01:15  profilanswer
 

"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
n°523137
sibelius
Vous êtes sûr ?
Posté le 25-09-2003 à 13:18:24  profilanswer
 

Désolé pour le  :bounce: , mais vous ne trouvez pas ça curieux ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°523183
fastclemmy
(re-)Dictateur en plastique
Posté le 25-09-2003 à 14:17:10  profilanswer
 

SIBELIUS a écrit :

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  :heink:  


 
Moi ça marche aussi sur IE (même numéro de version) :heink:

n°523385
sibelius
Vous êtes sûr ?
Posté le 25-09-2003 à 18:03:24  profilanswer
 

fastclemmy a écrit :


 
Moi ça marche aussi sur IE (même numéro de version) :heink:  


ç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
n°523425
gm_superst​ar
Appelez-moi Super
Posté le 25-09-2003 à 19:18:36  profilanswer
 

SIBELIUS a écrit :

"Un bloc dans un élément en-ligne ?"
>>> il passe en display: block donc ne reste pas 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 :D
 
 
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 :D


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°523464
gm_superst​ar
Appelez-moi Super
Posté le 25-09-2003 à 20:09:47  profilanswer
 
n°523595
sibelius
Vous êtes sûr ?
Posté le 25-09-2003 à 22:38:15  profilanswer
 

gm_superstar a écrit :


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.  


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 !  :pt1cable:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
mood
Publicité
Posté le 25-09-2003 à 22:38:15  profilanswer
 

n°523646
fadenretur​ns
Posté le 26-09-2003 à 01:04:07  profilanswer
 

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/

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[CSS] Colonnes et IEformulaire: 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'impressionloader & 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
Plus de sujets relatifs à : Afficher un calque en CSS : un truc bizarre avec a:hover

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.054 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR