[CSS & HTML] le hover ne fonctionne pas
Fermé
boss0211
Messages postés
264
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
9 septembre 2007
-
1 sept. 2006 à 21:11
eniamor - 7 févr. 2012 à 16:43
eniamor - 7 févr. 2012 à 16:43
A voir également:
- [CSS & HTML] le hover ne fonctionne pas
- Editeur html - Télécharger - HTML
- Espace en html - Astuces et Solutions
- Espace html ✓ - Forum Webmastering
- &Nbsp html ✓ - Forum Webmastering
- [HTML] - á et les autres - Forum HTML
13 réponses
lami20j
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019
3 569
2 sept. 2006 à 17:42
2 sept. 2006 à 17:42
Salut,
JS pour IE
Pas obligatoire. Voir La Seconde technique
Je cite Pour cet âne bâté d'Internet Explorer, il va falloir tricher
http://css.mammouthland.net/zoomer-une-image-avec-css.php
lami20j
JS pour IE
Pas obligatoire. Voir La Seconde technique
Je cite Pour cet âne bâté d'Internet Explorer, il va falloir tricher
http://css.mammouthland.net/zoomer-une-image-avec-css.php
lami20j
lami20j
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019
3 569
2 sept. 2006 à 18:26
2 sept. 2006 à 18:26
Re,
un exemple https://twitter.com/ceosammassey
lami20j
un exemple https://twitter.com/ceosammassey
lami20j
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
En fait, malgré tout le siphonage de cervelle parmi les réponses, il peut être utilse d'aborder le fait est que lorsque l'on utilise :
<a onClick="monaction()">LIEN</a>
...au lieu de :
<a href="#" onClick="monaction()">LIEN</a>
Internet Explorer (tout comme Firefox d'ailleurs) ne prendra pas en compte vos styles CSS pour l'évènement HOVER. Or certaines personnes (dont je fais partie) trouvent très moche ce # qui s'imicie et qui ne sert à rien sinon.
Donc, si c'est primordial pour vous, il suffit de créer l'évènement HOVER vous même (à condition que vos visiteurs utilisent Javascript). Cela alourdira votre code mais si c'est vraiment ce que vous voulez ça donnera :
<div id="lien" onClick="monaction()" onMouseOver="mafonctionhover()" onMouseOut="mafonctionout()" class="monstyle">LIEN</div>
...avec comme styles :
.monstyle{
color=#FF0000;
}
.monstyle_survol{
color=#0000FF;
}
...et comme code javascript :
function mafonctionhover() {
var lien = document.getElementById('lien');
lien.setAttribute("class","monstyle_survol"); // Firefox
lien.setAttribute("className","monstyle_survol"); // Internet Explorer
}
function mafonctionout() {
var lien = document.getElementById('lien');
lien.setAttribute("class","monstyle"); // Firefox
lien.setAttribute("className","monstyle"); // Internet Explorer
}
Bref, vous l'aurez compris : c'est sans doute plus simple d'utiliser href=#
mais c'est moche, c'est sûr ;-)
<a onClick="monaction()">LIEN</a>
...au lieu de :
<a href="#" onClick="monaction()">LIEN</a>
Internet Explorer (tout comme Firefox d'ailleurs) ne prendra pas en compte vos styles CSS pour l'évènement HOVER. Or certaines personnes (dont je fais partie) trouvent très moche ce # qui s'imicie et qui ne sert à rien sinon.
Donc, si c'est primordial pour vous, il suffit de créer l'évènement HOVER vous même (à condition que vos visiteurs utilisent Javascript). Cela alourdira votre code mais si c'est vraiment ce que vous voulez ça donnera :
<div id="lien" onClick="monaction()" onMouseOver="mafonctionhover()" onMouseOut="mafonctionout()" class="monstyle">LIEN</div>
...avec comme styles :
.monstyle{
color=#FF0000;
}
.monstyle_survol{
color=#0000FF;
}
...et comme code javascript :
function mafonctionhover() {
var lien = document.getElementById('lien');
lien.setAttribute("class","monstyle_survol"); // Firefox
lien.setAttribute("className","monstyle_survol"); // Internet Explorer
}
function mafonctionout() {
var lien = document.getElementById('lien');
lien.setAttribute("class","monstyle"); // Firefox
lien.setAttribute("className","monstyle"); // Internet Explorer
}
Bref, vous l'aurez compris : c'est sans doute plus simple d'utiliser href=#
mais c'est moche, c'est sûr ;-)
[o.o]REplay
Messages postés
357
Date d'inscription
vendredi 20 juin 2008
Statut
Membre
Dernière intervention
20 juillet 2009
28
7 août 2008 à 16:29
7 août 2008 à 16:29
ouaaaaaaaaah, +1000, tu viens de me sauver... ça fait une heure que je cherche pourquoi mon lien n'est pas souligné... et effectivement -> il faut un href='#' -.-
Microsoft, je vous haie, entre autres, pour toutes les heures que vous faites perdre au monde entier.
Merci en tous cas :)
Microsoft, je vous haie, entre autres, pour toutes les heures que vous faites perdre au monde entier.
Merci en tous cas :)
...et ça marche aussi pour les lignes de tableau. Enfin, même si ce n'est pas forcément ce que cherchait boss0211, le titre de la discussion pourra aider aussi les personnes dans le cas que je décris et comprendront pourquoi le hover ne marche pas :-)
Salut,
Parfois il utile d'avoir l'humilite de dire "je ne sais pas"
au lieu d'affirmer des choses d'une maniere definitive :-)
On ne cesse d'apprendre tous les jours.
En compilant des infos par ci par la, on arrive a l'exemple suivant qui repond a a la question de depart
et meme beaucoup plus j'espere.
<!-- ---------------------------------------------- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test CSS</title>
<STYLE>
html { font-size: x-small;}
body { font: 120% Verdana, sans-serif; color: #000; background-color: #fff;}
a { color: #11d; text-decoration: underline;}
a:hover { text-decoration: none;}
th { text-align: left;}
.small { font-size: x-small;}
.maintable { font-size: inherit; margin-bottom: 2em; border-bottom: 1px solid #aaa; border-collapse: collapse;}
.maintable tr.d { background-color: #f0f1f2;}
.maintable tr:hover,.maintable tr.hovered { background-color: #d0d7e2;}
.maintable th { color: #222; line-height: 1.8em; background-color: #d5dae0; border: 1px solid #222; padding: 0 .3em;}
.maintable td { line-height: 1.6em; border-left: 1px solid #aaa; border-right: 1px solid #aaa; padding: 0 .3em;}
.maintable td a { color: #000; text-decoration: none;}
.maintable td a:hover { text-decoration: underline;}
.maintable small { visibility: hidden; font-size: 80%; vertical-align: middle;}
.maintable tr:hover small,.maintable tr.hovered small { visibility: visible;}
</STYLE>
</head>
<BODY>
<BR><BR><BR><BR>
<TABLE class="maintable" ALIGN="CENTER" WIDTH="800">
<TR><TH scope="col">Colonne Text</TH><TH scope="col">Colonne Link</TH></TR>
<TR CLASS="d">
<TD ALIGN=CENTER> Text Simple 1 </TD>
<td>
<a href="./page1.htm">Vers Lien 1</a>
<small>ou <strong><a href="./resume/page1.htm">link resume 1</a></strong></small>
</td>
</TR>
<TR>
<TD ALIGN=CENTER> Text Simple 2 </TD>
<td>
<a href="./page2.htm">Vers Lien 2</a>
<small>ou <strong><a href="./resume/page2.htm">link resume 2</a></strong></small>
</td>
</TR>
</TR>
<TR CLASS="d">
<TD ALIGN=CENTER>Text Simple 3 </TD>
<td>
<a href="./page3.htm">Vers Lien 3</a>
<small>ou <strong><a href="./resume/page3.htm">link resume 3</a></strong></small>
</td>
</TR>
<TR>
<TD ALIGN=CENTER> Text Simple 4 </TD>
<td>
<a href="./page4.htm">Vers Lien 4</a>
<small>ou <strong><a href="./resume/page4.htm">link resume 4</a></strong></small>
</td>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>
Parfois il utile d'avoir l'humilite de dire "je ne sais pas"
au lieu d'affirmer des choses d'une maniere definitive :-)
On ne cesse d'apprendre tous les jours.
En compilant des infos par ci par la, on arrive a l'exemple suivant qui repond a a la question de depart
et meme beaucoup plus j'espere.
<!-- ---------------------------------------------- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test CSS</title>
<STYLE>
html { font-size: x-small;}
body { font: 120% Verdana, sans-serif; color: #000; background-color: #fff;}
a { color: #11d; text-decoration: underline;}
a:hover { text-decoration: none;}
th { text-align: left;}
.small { font-size: x-small;}
.maintable { font-size: inherit; margin-bottom: 2em; border-bottom: 1px solid #aaa; border-collapse: collapse;}
.maintable tr.d { background-color: #f0f1f2;}
.maintable tr:hover,.maintable tr.hovered { background-color: #d0d7e2;}
.maintable th { color: #222; line-height: 1.8em; background-color: #d5dae0; border: 1px solid #222; padding: 0 .3em;}
.maintable td { line-height: 1.6em; border-left: 1px solid #aaa; border-right: 1px solid #aaa; padding: 0 .3em;}
.maintable td a { color: #000; text-decoration: none;}
.maintable td a:hover { text-decoration: underline;}
.maintable small { visibility: hidden; font-size: 80%; vertical-align: middle;}
.maintable tr:hover small,.maintable tr.hovered small { visibility: visible;}
</STYLE>
</head>
<BODY>
<BR><BR><BR><BR>
<TABLE class="maintable" ALIGN="CENTER" WIDTH="800">
<TR><TH scope="col">Colonne Text</TH><TH scope="col">Colonne Link</TH></TR>
<TR CLASS="d">
<TD ALIGN=CENTER> Text Simple 1 </TD>
<td>
<a href="./page1.htm">Vers Lien 1</a>
<small>ou <strong><a href="./resume/page1.htm">link resume 1</a></strong></small>
</td>
</TR>
<TR>
<TD ALIGN=CENTER> Text Simple 2 </TD>
<td>
<a href="./page2.htm">Vers Lien 2</a>
<small>ou <strong><a href="./resume/page2.htm">link resume 2</a></strong></small>
</td>
</TR>
</TR>
<TR CLASS="d">
<TD ALIGN=CENTER>Text Simple 3 </TD>
<td>
<a href="./page3.htm">Vers Lien 3</a>
<small>ou <strong><a href="./resume/page3.htm">link resume 3</a></strong></small>
</td>
</TR>
<TR>
<TD ALIGN=CENTER> Text Simple 4 </TD>
<td>
<a href="./page4.htm">Vers Lien 4</a>
<small>ou <strong><a href="./resume/page4.htm">link resume 4</a></strong></small>
</td>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>
Voici une solution simple d'un lien vers une autre page sur une cellule "td" avec changement de couleur au passage de la souris :
<table bgcolor="red" width="190" height="25">
<tr>
<td width="5" height="25"></td>
<td style="cursor:pointer;" onclick="self.location.href='index.html'" onMouseover="this.bgColor='#FAF447'" onMouseout="this.bgColor='red'" width="180" height="25" align="left" valign="middle"><font face="verdana" size="2" color="#000000"><b> Accueil</b></font></td>
<td width="5" height="25"></td>
</tr>
</table>
style="cursor:pointer;" -> main sur lien style du pointer
onclick="self.location.href='index.html'" -> lien vers une autre page
onMouseover="this.bgColor='#FAF447'" onMouseout="this.bgColor='red'" -> changement de couleur au passage pointer
<table bgcolor="red" width="190" height="25">
<tr>
<td width="5" height="25"></td>
<td style="cursor:pointer;" onclick="self.location.href='index.html'" onMouseover="this.bgColor='#FAF447'" onMouseout="this.bgColor='red'" width="180" height="25" align="left" valign="middle"><font face="verdana" size="2" color="#000000"><b> Accueil</b></font></td>
<td width="5" height="25"></td>
</tr>
</table>
style="cursor:pointer;" -> main sur lien style du pointer
onclick="self.location.href='index.html'" -> lien vers une autre page
onMouseover="this.bgColor='#FAF447'" onMouseout="this.bgColor='red'" -> changement de couleur au passage pointer
Bonjour, si vous utilisez jQuery, vous pouvez utiliser le plugin suivant:
http://plugins.jquery.com/project/ie6hover
Il implémente purement et simplement la possibilité d'utiliser :hover sur tous les éléments de vos pages.
http://plugins.jquery.com/project/ie6hover
Il implémente purement et simplement la possibilité d'utiliser :hover sur tous les éléments de vos pages.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 779
2 sept. 2006 à 16:01
2 sept. 2006 à 16:01
Bonjour,
Peut-être parce que IE ne permet le :hover que dans des liens <a> ?
Peut-être parce que IE ne permet le :hover que dans des liens <a> ?
boss0211
Messages postés
264
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
9 septembre 2007
8
2 sept. 2006 à 16:03
2 sept. 2006 à 16:03
oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ??
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 779
2 sept. 2006 à 16:08
2 sept. 2006 à 16:08
Si c'est du menu haut de cette page
https://www.phpmyadmin.net/
que tu parles, on peut constater :
<td class="navactive"><a href="index.php" title="phpMyAdmin - Homepage">HOME</a></td>
https://www.phpmyadmin.net/
que tu parles, on peut constater :
<td class="navactive"><a href="index.php" title="phpMyAdmin - Homepage">HOME</a></td>
boss0211
Messages postés
264
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
9 septembre 2007
8
2 sept. 2006 à 16:12
2 sept. 2006 à 16:12
non je parle de celui qui est au niveau de mysql par exemple cher free c'est tout le TD qui change de couleur au passage de la souri
boss0211
Messages postés
264
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
9 septembre 2007
8
2 sept. 2006 à 18:20
2 sept. 2006 à 18:20
Et je fais comment en JS car je n'y connais strictement rien
2 sept. 2006 à 20:25
Il faudrait faire un truc du style :
Et c'est complètement invalide comme syntaxe.
2 sept. 2006 à 20:29
il me semble que tu n'as pas compris les liens dans html
tu ne peux pas utiliser une ligne d'un tableau comme lien
en revanche à l'intérieur d'une cellule oui
lami20j
2 sept. 2006 à 20:43
2 sept. 2006 à 21:57
mais qui parlais de rollover sur une ligne entière de tableau?!
il faudra le faire en js pour IE.
Tu veux donner un exemple?!
lami20j
P.S. Et j'espère que tu as regardé le lien que j'ai donné ici css html le hover ne fonctionne pas#6
4 sept. 2006 à 10:22
Boss0211 il me semble non ?
oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ??
non je parle de celui qui est au niveau de mysql par exemple cher free c'est tout le TD qui change de couleur au passage de la souri
P.S. Et j'espère que tu as regardé le lien que j'ai donné ici css html le hover ne fonctionne pas#6
Que veux-tu que je regarde ?
Les parades pour contrer les lacunes d'IE, je les connais quasiment toutes.