CSS et Hover
cs_pitchoune
Messages postés
15
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
7 avril 2007
-
26 mars 2007 à 20:34
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 - 27 mars 2007 à 16:35
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 - 27 mars 2007 à 16:35
11 réponses
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
26 mars 2007 à 22:10
26 mars 2007 à 22:10
B
onsoir...
pour des menus pure CSS il y a ceci http://css.alsacreations.com/Galeries-de-menus-en-CSS
;0)
onsoir...
pour des menus pure CSS il y a ceci http://css.alsacreations.com/Galeries-de-menus-en-CSS
;0)
Teclis01
Messages postés
1423
Date d'inscription
mardi 14 décembre 2004
Statut
Membre
Dernière intervention
29 décembre 2012
4
27 mars 2007 à 11:24
27 mars 2007 à 11:24
C'est du css ou js ici ?
--------------------------------------------------------------------------------------------------
Ilvaut mieux poser une question et passer pour bête que le rester toutesa vie
--------------------------------------------------------------------------------------------------
Ilvaut mieux poser une question et passer pour bête que le rester toutesa vie
cs_pitchoune
Messages postés
15
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
7 avril 2007
27 mars 2007 à 13:38
27 mars 2007 à 13:38
PetoleTeam, je te remercie pour ta reponse, mais je voudrais pouvoir utiliser le HOVERsur n'importe quelle balise sans pour autant utiliser de lien .
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
27 mars 2007 à 13:47
27 mars 2007 à 13:47
Bonjour, je crois que tu n'as pas d'autre choix que d'utiliser une balise, internet explorer a du mal à interprêter le Hover sur autre chose.....
Cf: http://zonecss.free.fr/style_css/feuille_css_hover.html ( il est écrit que le hover n'est inteprêter que pour la balise a )
de plus, il faudrait ( si cela ne te dérange pas ) utiliser le cursor:pointer plutôt que hand ( spécifique IE encore )
Voilà
[o-_-o]
Cf: http://zonecss.free.fr/style_css/feuille_css_hover.html ( il est écrit que le hover n'est inteprêter que pour la balise a )
de plus, il faudrait ( si cela ne te dérange pas ) utiliser le cursor:pointer plutôt que hand ( spécifique IE encore )
Voilà
[o-_-o]
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
cs_pitchoune
Messages postés
15
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
7 avril 2007
27 mars 2007 à 14:19
27 mars 2007 à 14:19
Merci de ta reponse Zobibol.
J'ai regarder ton lien et effectivement d'apres ce site il semblerait que le pseudo-element :css HOVER ne puisse être utiliser qu'avec la balise de lien.
Cependant d'apres les liens suivants, cela reste possible :
- http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hover.asp
- http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer
C'est pourquoi je ne comprends pas ce qui cloche dans mon code.
J'ai regarder ton lien et effectivement d'apres ce site il semblerait que le pseudo-element :css HOVER ne puisse être utiliser qu'avec la balise de lien.
Cependant d'apres les liens suivants, cela reste possible :
- http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hover.asp
- http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer
C'est pourquoi je ne comprends pas ce qui cloche dans mon code.
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
27 mars 2007 à 14:31
27 mars 2007 à 14:31
Sur le site de microsoft, il ne parle que d'internet explorer 7
et sur l'autre site, ( dynamicdrive ) ils utilisent tout de même la balise pour faire apparaître l'image agrandie ( c'est la balise qui contient les deux images )
Je crains fortement que tu sois obligé d'utiliser la balise ...
[o-_-o]
et sur l'autre site, ( dynamicdrive ) ils utilisent tout de même la balise pour faire apparaître l'image agrandie ( c'est la balise qui contient les deux images )
Je crains fortement que tu sois obligé d'utiliser la balise ...
[o-_-o]
cs_roro06
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
27 mars 2007 à 14:44
27 mars 2007 à 14:44
Bonjour
un début de réponse ici : il faut utiliser des fichiers externes .htc :
http://www.xs4all.nl/%7Epeterned/csshover.html
Cordialement
Roro webDev
un début de réponse ici : il faut utiliser des fichiers externes .htc :
http://www.xs4all.nl/%7Epeterned/csshover.html
Cordialement
Roro webDev
cs_pitchoune
Messages postés
15
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
7 avril 2007
27 mars 2007 à 14:46
27 mars 2007 à 14:46
Oui, c'est vrai, je viens de réétudier le code de Dynamicdrive et en effet la balise span est contenu dans une balise lien !
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
27 mars 2007 à 15:00
27 mars 2007 à 15:00
Sinon il existe une méthode qui marche tout le temps, le traitement sur le mouseOver, mouseOut
du coup ton style devient
.dsTD { vertical-align: top; border-right: 2px solid #6D99B2; width: 188px;padding-top: 28px; }
.dsUL { list-style-image:url(images/0001.gif); vertical-align: middle; }
.ds { padding: 4 4 4 16; cursor: pointer; width:100%; height:100%; }
.dsOver { background-color: #0A6282; border: 2px solid white; cursor: pointer; }
et dans ta table:
----
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'" >Texte 1</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
,
...
[o-_-o]
du coup ton style devient
.dsTD { vertical-align: top; border-right: 2px solid #6D99B2; width: 188px;padding-top: 28px; }
.dsUL { list-style-image:url(images/0001.gif); vertical-align: middle; }
.ds { padding: 4 4 4 16; cursor: pointer; width:100%; height:100%; }
.dsOver { background-color: #0A6282; border: 2px solid white; cursor: pointer; }
et dans ta table:
----
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'" >Texte 1</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
<li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</li>
,
...
[o-_-o]
cs_pitchoune
Messages postés
15
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
7 avril 2007
27 mars 2007 à 16:11
27 mars 2007 à 16:11
Merci de ta reponse, j'avais bien pensé à cette solution mais comme je voulais alleger le code j'avais penser passer uniquement par le CSS mais je crois que je vais finalement revenir a cette solution !
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
27 mars 2007 à 16:35
27 mars 2007 à 16:35
Ou alors, tu ajoutes la balise et tu lui appliques la classe ds ( qu'il ne faut pas appliquer à <li> du coup... )
et surtout, il faut bien penser à mettre un href même vide sinon, ça ne fonctionne pas.
je voulais alleger le code parfois, le CSS c'est encore plus complexe que le javascript
[o-_-o]
et surtout, il faut bien penser à mettre un href même vide sinon, ça ne fonctionne pas.
je voulais alleger le code parfois, le CSS c'est encore plus complexe que le javascript
[o-_-o]
