[CSS & HTML] le hover ne fonctionne pas
boss0211
Messages postés
264
Statut
Membre
-
eniamor -
eniamor -
Bonjour,
mon problème c'est que le HOVER ne fonctionne pas voici le code:
CSS
HTML
--
MERCI BIEN!!
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!">
--
MERCI BIEN!!
13 réponses
-
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-
-
-
-
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 -
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.
-
-
-
-
-
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 ;-) -
...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>
-
-
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 -
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. -
Bonjour,
Peut-être parce que IE ne permet le :hover que dans des liens <a> ?
-
oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ??
-
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>
-
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
-
Et je fais comment en JS car je n'y connais strictement rien
