Posez votre question Signaler

[CSS & HTML] le hover ne fonctionne pas

boss0211 263Messages postés 13 février 2006Date d'inscription - Dernière réponse le 7 févr. 2012 à 16:43
Bonjour,
mon problème c'est que le HOVER ne fonctionne pas voici le code:


CSS
//fond boutton

input.go {
background-image: url(http://boss021190.free.fr/img/bouton.png) no-repeat;
color: #FFFFFF;
}

input.go:hover {
background: #0099FF;
color: #FFFFFF;
display: block;
}


HTML
<input type="submit" name="go!" class="go" value="cherche!">
Lire la suite 

[CSS & HTML] le hover ne fonctionne pas »

24 réponses
Réponse
+2
moins plus
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://mammouthland.free.fr/cours/css/cours8.php

lami20j
lami20j- 4 sept. 2006 à 11:28
Re,

Les parades pour contrer les lacunes d'IE, je les connais quasiment toutes.

Je suppose que tu connais aussi toutes les lacunes d'IE?!


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

En effet. Cependant pas avec cette syntaxe
<a href="#"><tr><td>...</td><td>...</td></tr></a>
mais avec celle-ci
<tr><td><a href="#">...</a></td><td>...</td></tr>

Voilà depuis Free la partie dont tu parles (je suppose, si je me trompe dit le)

<table width="960" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="775" valign="top"><table width="775" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="9"><img src="/im/mast_vdot1.gif" width="9" height="19"></td>
          <td align="center" bgcolor="#E2E2E2" class="td11"><a href="http://adsl.free.fr/" class="linknavred"><b>S'ABONNER</b></a> </td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://subscribe.free.fr/login/" class="linknav"><b>MON 
            COMPTE </b></a></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://imp.free.fr/" class="linknav"><b>WEBMAIL</b></a></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://support.free.fr/" class="linknav"><b>ASSISTANCE</b></a></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://pageperso.free.fr/" class="linknav"><b>PAGES 
            PERSO </b></a></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://webnews.free.fr/" class="linknav"><b>WEBNEWS</b></a></td>
          <td width="1"><img src="/im/mast_vdot2.gif" width="1" height="19"></td>
          <td align="center" bgcolor="#26333E"><a href="http://chat.free.fr/" class="linknav"><b>CHAT</b></a></td>
        </tr>
</table>

Ils utilisent une classe (donc de CSS à priori et pas de js)

lami20j
DingoDingo - 4 sept. 2006 à 13:59
Je suppose que tu connais aussi toutes les lacunes d'IE?!

Je vais pas dire toutes, on sait jamais que y'en a quelques-unes que je ne connaissent pas :D, et ce serait un peu prétentieux..., mais disons les principales, et surtout les plus gênantes, hover, png, bordure, sélecteurs, positionnement fixe, min-height(et les autres), focus, etc..
Pour les principales(j'en oubli certainement).


mais avec celle-ci
<tr><td><a href="#">...</a></td><td>...</td></tr>

Oui, mais le hover ne s'applique qu'à une seule cellule, et pas sur une ligne entière, ça n'a pas trop d'intérêt de faire un hover sur une cellule seule.

Voilà depuis Free la partie dont tu parles (je suppose, si je me trompe dit le)

Non, ce n'est pas cette partie là, mais ce n'est pas propre à free, mais à phpmyadmin.

Une ligne du tableau :
<tr  onmouseover="setPointer(this, 2, 'over', '#E5E5E5', '#CCCCFF', '#FFCC99');" onmouseout="setPointer(this, 2, 'out', '#E5E5E5', '#CCCCFF', '#FFCC99');" onmousedown="setPointer(this, 2, 'click', '#E5E5E5', '#CCCCFF', '#FFCC99');">

D'ailleurs avec le js désactivé, le rollover ne fonctionne plus même sur ff.

;)
bidule - 2 sept. 2009 à 21:50
Sur le même site, y'a mieux :
http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php
Ajouter un commentaire
Réponse
+2
moins plus
eniamor - 7 févr. 2012 à 16:43
merci, cette solution marche nickel
Ajouter un commentaire
Réponse
+1
moins plus
JS pour IE, css pour les autres.
Ajouter un commentaire
Réponse
+1
moins plus
Re,

un exemple http://www.jejavascript.net/imag_zoom.php

lami20j
Ajouter un commentaire
Réponse
+1
moins plus
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 ;-)
[o.o]REplay- 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 :)
Ajouter un commentaire
Réponse
+1
moins plus
...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 :-)
DebutantCSS - 2 nov. 2008 à 13:44
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>
Ajouter un commentaire
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
+1
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour,

Peut-être parce que IE ne permet le :hover que dans des liens <a> ?
Ajouter un commentaire
Réponse
+0
moins plus
oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ??
Ajouter un commentaire
Réponse
+0
moins plus
Si c'est du menu haut de cette page
http://www.phpmyadmin.net/home_page/index.php
que tu parles, on peut constater :
<td class="navactive"><a href="index.php" title="phpMyAdmin - Homepage">HOME</a></td>
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
Et je fais comment en JS car je n'y connais strictement rien
Ajouter un commentaire
Ce document intitulé « [CSS & HTML] le hover ne fonctionne pas » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?