28220 sujets

CSS et mise en forme, CSS3

Display, visibility - bug

Pages :
Salut

J'ai un petit probleme d'affichage.
En fait j'ai un div 


.cadreinfo {
	background-color: #FFFFFF;
	float: right;
	height: 100px;
	width: 100px;
	padding: 5px;
	text-align: justify;
	color: #000000;
}


Que je voudrais masquer lorsque l'on passe dessus. Donc j'ai cherché un peu et j'en ai conclus ceci :


.cadreinfo:hover {
    display: none;
}


Alors sous firefox c'est tres byzar, mon cadre clignotte plusieurs fois avant de disparaitre et je vois pas d'ou ça peut venir Smiley ohwell
Modifié par supercanard (29 Mar 2005 - 19:16)
Si ton div cadreinfo est unique, comme le laisse suggérer son nom de class, tu as intérêt à lui donner un id et non une class.
Merci pour le conseil =)
voilà qui est fait mais toujours rien de résolu pour mon bloc.
je sais pas si il ya un rapport mais dans ce bloc il ya du texte et il a l'air de mieux se masquer quand on passe dessus que si l'on passe sur du vide
Modifié par supercanard (29 Mar 2005 - 10:54)
Le div ayant un display block, l'endroit que tu survoles ne devrait pas avoir d'influence sur le hover.

Tu aurais un lien pour qu'on regarde en direct ?
Quelle chance tu as un superbe effet de transition genre Flash sans rien faire Smiley smile

En fait le block se masque bien dés que la souris vient au dessus, mais il clignote dés que tu déplace le pointeur au dessus de ton block. Certainement un petit problème de rafraichissement sous FireFox.

Je ne vois pas de solution simple.
Une inspiration m'est venue :

comme tu met display: none, le block sort du flux et disparaît de la structure du document => il n'est plus hover => il réapparaît , etc etc...

Si par contre tu fais un truc bidon de ce genre,

#cadreinfo:hover {
background-color: #99CC33;
color: #99CC33;
}

ça marche Smiley cligne
Oui cette bidouille aurrais pu marcher mais il ya un hic :
Dans le bloc vert du dessous il va y avoir une image... sinon effectivement je lui faisais prendre la couleur du bloc inférieur et c'etait bon.
Et si tu imbrique un div dans un div et que tu fais

div#conteneur:hover div#contenu{visibility:hidden;}

ça marche mieux ?
Bonjour à toutes et tous Smiley smile

Attention TriadPtale, pour une lecture plus facile des échanges, il faut placer les lignes de codes entre les balise "code" Smiley cligne ... Merci d'avance !


#cadreinfo:hover {
background-color: #99CC33;
color: #99CC33;
}

Modifié par dominique (29 Mar 2005 - 12:06)
Oui je crois que tu m'a donné la solution là =)
Déja pour commencer j'ai remplacé le display:none par visibility:hidden et c'est beaucoups mieux (maintenant ca marche sous safari).
Et comme j'ai mis un padding de 5, si on se met juste avant les 5 pixels la le masquage est imédiat. Donc effectivement si je met mon texte dans un autre div la ca va marcher =)
bon alors en fait c'est toujours pas la solution. Voilà ou jen suis :


#cadreinfo {
	background-color: #FFFFFF;
	float: right;
	height: 100px;
	width: 100px;
	padding: 5px;
}
#cadreinfo:hover {
	visibility:hidden;	
}
#texteinfo {
	height: auto;
	width: auto;
	padding: 5px;
	text-align: justify;
	color: #000000;
}
#texteinfo:hover {
	visibility:hidden;	
}


et voilà toujours le lien
http://eyesbutterfly.com/test.htm
Bon je suis pas encore trés callé en css mais j'ai l'impression que ce qui pose probleme c'est que le div declence l'action de masquage et la subisse en meme temps.
Qu'en pensez vous ?
Lut tous, Smiley cligne


Bon moi sous IE6 cela ne masque rien Smiley decu .


As tu essayé mais en renseignant toutes les positions du lien.



a:link{}
a:visited{}
a:hover{}
a:active{}

Modifié par knarf (29 Mar 2005 - 19:22)
merci pour le test IE =)

alors si la syntaxe et bonne ben il aime encore moins, ca ne masque plus du tout cette fois :


#cadreinfo {
	background-color: #B7C4A3;
	float: right;
	height: 100px;
	width: 100px;
	padding: 5px;
}
#cadreinfo:hover:active:visited:link {
	visibility:hidden;	
}
#texteinfo {
	height: auto;
	width: auto;
	padding: 5px;
	text-align: justify;
	color: #000000;
}
#texteinfo:hover:active:visited:link {
	visibility:hidden;	
}
Sous IE cette méthode ne fonctionne pas les :hover ne sont accepté que pour les liens, désolé.

Pour le reste, je cherche...

#texteinfo:hover:active:visited:link {
	visibility:hidden;	
}

Ceci n'est pas correct:

#texteinfo:hover,  #texteinfo:active, #texteinfo:focus {
	visibility:hidden;	
}

Mais cela ne changera rien pour IE. Et pour FF n'on plu je crains... Je ne vois pas d'où cela viens Smiley langue

Pour :link et :visited, c'est respectivement pour les liens non visités et visités.
a écrit :
Sous IE cette méthode ne fonctionne pas les :hover ne sont accepté que pour les liens, désolé.


il y as la possibilité de faire un display:block; 

mon_bloc a{display:block;}


et ajuster avec un padding par exemple.

EDIT

Ne tenez pas compte de ma réponse je me suis embarqué sur un truc bidon.
Modifié par knarf (29 Mar 2005 - 20:42)
Pages :
Sujet clos
Aller à