[CSS & HTML] le hover ne fonctionne pas

Version anglaise Version espagnoleVersion française

Dimanche 6 juillet 2008 - 12:40:59
inscrits : 862167
connectés : 30705
questions/jour : 4991
Taux de réponse : 82.48%

Vous n'êtes pas connecté. Inscrivez-vous ! (mot de passe oublié)

CommentCaMarche.net - Communauté informatique

Par Pertinence Date Nom d'utilisateur dans

Posez votre question Forum Webmastering

Ils ont besoin de votre aide

12:40 tirage photo (Infographie/Photo)
12:40 Redemarrage intenpestif :( (Matériel/Hardware)
12:40 demarrage de mon acer M5610 (Matériel/Hardware)
12:39 jeu ps2 sur pc (Jeux vidéos)
12:38 résolution max d'un écran... (Matériel/Hardware)
12:38 comme mettre des video sur psp (Jeux vidéos)

Tous les messages sans réponse

Les règles à respecter

	Réserver un accueil cordial aux nouveaux utilisateurs.
	Poster son message dans le thème le plus approprié.
	Respecter la législation en vigueur.
	Faire usage de formule de politesse et échanger avec courtoisie.
	Ne pas poster de message à vocation commerciale.
	Rédiger les messages dans un langage clair sans abréviations, style télégraphique ou mode SMS
	Le cas échéant, expliquer de manière pédagogique les règles du forum

Lire le texte complet de la charte

[CSS & HTML] le hover ne fonctionne pas
par

boss0211

Statut : Non résolu
vendredi 1 septembre 2006 à 21:11:50

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

Répondre à boss0211 Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Gihef, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

boss0211, le samedi 2 septembre 2006 à 16:03:32

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

Répondre à boss0211

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Gihef, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

boss0211, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Dingo, le samedi 2 septembre 2006 à 17:00:09

JS pour IE, css pour les autres.

Répondre à Dingo

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Par

lami20j, le samedi 2 septembre 2006 à 17:42:05

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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Dingo, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

lami20j, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Dingo, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

lami20j, le samedi 2 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Dingo, le lundi 4 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

lami20j, le lundi 4 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Dingo, le lundi 4 septembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

boss0211, le samedi 2 septembre 2006 à 18:20:57

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

Répondre à boss0211

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

lami20j, le samedi 2 septembre 2006 à 18:26:22

Re,

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

lami20j

Répondre à lami20j

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Graphys, le mercredi 20 février 2008 à 15:42:00

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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Par

Graphys, le mercredi 20 février 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

Trucs & astuces pertinents trouvés dans la base de connaissances

02/11 11h14	[Webmaster] Un formulaire de contact pour votre site	Webmaster
21/11 14h59	Espace en HTML	HTML
14/04 20h26	Valider le code HTML d'une page web	HTML
13/07 10h04	[HTML] -Un document de référence	HTML
07/03 17h13	[Site web] Vérifier, optimiser et nettoyer son code HTML	Webmaster

Plus d'astuces sur « [CSS & HTML] le hover ne fonctionne pas »

Discussions pertinentes trouvées dans le forum

03/05 01h42	[css & html] Problème	Programmation	01/06 13h22	11
07/02 22h26	MON SITE ME REND FOU!! CSS HTML	Webmastering	08/06 21h36	5
07/11 14h47	css/html	Webmastering	07/11 14h56	6

Plus de discussions sur « [CSS & HTML] le hover ne fonctionne pas » Discussion en cours Discussion fermée Problème résolu

Logiciels pertinents trouvés dans les téléchargements

	HTML Tidy - HTML Tidy est un utilitaire permettant de vérifier et d'optimiser tout code HTML. La version originale de cet utilitaire...	Catégorie: Webmaster Licence: Freeware/gratuit
	HTMLDOC - HTMLDOC est un outil permettant de convertir une page HTML (Hyper-Text Markup Language) vers un fichier HTML indexé, vers...	Catégorie: PDF Licence: Freeware/gratuit
	Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...	Catégorie: Extensions Firefox Licence: Freeware/gratuit
	Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...	Catégorie: Editeurs HTML Licence: Open Source

Plus de logiciels gratuits sur « [CSS & HTML] le hover ne fonctionne pas »

Produits relatifs

TNB CSSP1	Catégorie: Casque audio	Aucun avis Donnez votre opinion sur TNB CSSP1	7.49 € Alapage
TNB CSSP2	Catégorie: Casque audio	Aucun avis Donnez votre opinion sur TNB CSSP2	7.49 € Alapage
TNB CSSP4BL	Catégorie: Casque audio	Aucun avis Donnez votre opinion sur TNB CSSP4BL	8.69 € Alapage
TNB CSSF033272	Catégorie: Casque audio	Aucun avis Donnez votre opinion sur TNB CSSF033272	44.90 € Alapage

Plus de produits sur « [CSS & HTML] le hover ne fonctionne pas »

Titre du message :
Votre pseudo:
Votre email :
Message:


Options:	Recevoir les réponses par mail.
	Aide