[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

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!">

A voir également:

13 réponses

Réponse 1 / 13

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

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
2 sept. 2006 à 20:25

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 21331 Date d'inscription jeudi 4 novembre 2004 Statut Modérateur, Contributeur sécurité Dernière intervention 30 octobre 2019 3 569 > Dingo
2 sept. 2006 à 20:29

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
2 sept. 2006 à 20:43

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 21331 Date d'inscription jeudi 4 novembre 2004 Statut Modérateur, Contributeur sécurité Dernière intervention 30 octobre 2019 3 569 > Dingo
2 sept. 2006 à 21:57

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 21331 Date d'inscription jeudi 4 novembre 2004 Statut Modérateur, Contributeur sécurité Dernière intervention 30 octobre 2019
4 sept. 2006 à 10:22

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
7 mai 2009 à 13:54

ici ca marche !!!

http://www.javascriptfr.com

eniamor
7 févr. 2012 à 16:43

merci, cette solution marche nickel

Réponse 3 / 13

Dingo
2 sept. 2006 à 17:00

JS pour IE, css pour les autres.

Réponse 4 / 13

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

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
20 févr. 2008 à 15:42

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 357 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 20 juillet 2009 28
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 :)

Réponse 6 / 13

Graphys
20 févr. 2008 à 15:46

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

Réponse 7 / 13

lolo
29 nov. 2009 à 18:59

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
18 août 2010 à 17:01

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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 779
2 sept. 2006 à 16:01

Bonjour,

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

Réponse 10 / 13

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

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

Réponse 11 / 13

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

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 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 9 septembre 2007 8
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

Réponse 13 / 13

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

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

Discussions similaires

la balise <br> ou <br />

Balise </br>

Saut de lignes sans <br/>

Espace HTML