High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[CSS & HTML] le hover ne fonctionne pas

Dernière réponse le 2 sep 2009 à 21:50:52 boss0211, le 1 sep 2006 à 21:11:50 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS & HTML] le hover ne fonctionne pas » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Posez votre question Répondre

1

Gihef, le 2 sep 2006 à 16:01:34

Bonjour,

Peut-être parce que IE ne permet le :hover que dans des liens <a> ?
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

2

boss0211, le 2 sep 2006 à 16:03:32

Oui mais alors pourquoi dans phpmyadmin le hover fonctionne très bien ? dans leure tableau ?? MERCI BIEN!!

   
Répondre à boss0211

3

Gihef, le 2 sep 2006 à 16:08:12

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>
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

4

boss0211, le 2 sep 2006 à 16:12:57

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 MERCI BIEN!!

   
Répondre à boss0211

5

Dingo, le 2 sep 2006 à 17:00:09

JS pour IE, css pour les autres.

   
Répondre à Dingo

6

lami20j, le 2 sep 2006 à 17:42:05
  • +2

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

   
Répondre à lami20j

9

Dingo, le 2 sep 2006 à 20:25:14

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.

   
Répondre à Dingo

10

lami20j, le 2 sep 2006 à 20:29:34

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

   
Répondre à lami20j

11

Dingo, le 2 sep 2006 à 20:43:27

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.

   
Répondre à Dingo

12

lami20j, le 2 sep 2006 à 21:57:21

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

   
Répondre à lami20j

13

Dingo, le 4 sep 2006 à 10:22:43

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épondre à Dingo

14

lami20j, le 4 sep 2006 à 11:28:26

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

   
Répondre à lami20j

15

Dingo, le 4 sep 2006 à 13:59:39

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.

;)

   
Répondre à Dingo

21

 bidule, le 2 sep 2009 à 21:50:52
   
Répondre à bidule

7

boss0211, le 2 sep 2006 à 18:20:57

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

   
Répondre à boss0211

8

lami20j, le 2 sep 2006 à 18:26:22
   
Répondre à lami20j

16

Graphys, le 20 fév 2008 à 15:42:00
  • +1

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

   
Répondre à Graphys

18

[o.o]REplay, le 7 aoû 2008 à 16:29:50

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 :) ~• Coin Coin •~
replay.homeunix.com

   
Répondre à [o.o]REplay

17

Graphys, le 20 fév 2008 à 15:46:24

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

   
Répondre à Graphys

19

DebutantCSS, le 2 nov 2008 à 13:44:53
  • +2

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épondre à DebutantCSS

20

samih, le 7 mai 2009 à 13:54:16
   
Répondre à samih
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net