[CSS & HTML] le hover ne fonctionne pas

boss0211 Messages postés 264 Statut Membre -
eniamor - 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!">

Afficher la suite

A voir également:

[CSS & HTML] le hover ne fonctionne pas
Editeur html - Télécharger - HTML
Espace en html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
Html download - Télécharger - HTML
Nbsp html ✓ - Forum Webmastering

13 réponses

Réponse 1 / 13

lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité 3 570

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

Dingo

Bah, je sais bien, mais ce n'est pas applicable à une ligne de tableau.

Il faudrait faire un truc du style :

<a href="#"><tr><td>...</td><td>...</td></tr></a>

Et c'est complètement invalide comme syntaxe.

lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité 3 570 > Dingo

Salut,

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

<tr><td><a href="#">...</a></td><td>...</td></tr>

lami20j

Dingo > Dingo

C'est donc bien ce que je disais, si tu veux faire un rollover sur une ligne entière de tableau, il faudra le faire en js pour IE.

lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité 3 570 > Dingo

Re,

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

Dingo > lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité

mais qui parlais de rollover sur une ligne entière de tableau?!

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.

Réponse 2 / 13

samih

ici ca marche !!!

http://www.javascriptfr.com

eniamor

merci, cette solution marche nickel

Réponse 3 / 13

Dingo

JS pour IE, css pour les autres.

Réponse 4 / 13

lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité 3 570

Re,

un exemple https://twitter.com/ceosammassey

lami20j

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

Graphys

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 Messages postés 385 Statut Membre 28

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

Réponse 6 / 13

Graphys

...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

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>

Réponse 7 / 13

lolo

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

Réponse 8 / 13

poupougnac

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.

Réponse 9 / 13

Gihef Messages postés 5165 Statut Contributeur 2 779

Bonjour,

Peut-être parce que IE ne permet le :hover que dans des liens <a> ?

Réponse 10 / 13

boss0211 Messages postés 264 Statut Membre 8

oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ??

Réponse 11 / 13

Gihef Messages postés 5165 Statut Contributeur 2 779

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>

Réponse 12 / 13

boss0211 Messages postés 264 Statut Membre 8

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

Réponse 13 / 13

boss0211 Messages postés 264 Statut Membre 8

Et je fais comment en JS car je n'y connais strictement rien

Discussions similaires

la balise <br> ou <br />

Balise </br>

Espace en HTML

Saut de lignes sans <br/>

Votre réponse

Discussions similaires