Rollover css et pas de JS!

[achaternet]

Bonjour,

Je cherche desesperement, mais cela n est peut etre pas possible de creer un changement de couleur d un ligne d un table au survol de la souris.

J'arrive a le faire avec l association du JS par un onmouseover et onmouseout.

Es ce possible sans JS???

car ca alourdie la page inutilement, si on peut le definir une bonne fois pour toute dans le CSS par expl avec hover

[Bool]

Oui c'est tout à fait possible, mais IE lui ne sait pas faire...

IE ne gère le :hover que sur les liens.

[achaternet]

Oui c'est tout à fait possible, mais IE lui ne sait pas faire...

IE ne gère le :hover que sur les liens.

Ya pas de soluce alors (notamment pour IE)

Mon objectif, c est que ce soit compatible avec tous les navigateurs bien sur

[Bool]

Peux être avec "l'astuce" IE 7, mais je ne sais pas s'il gère les :hover

[Bool]

Je viens d'aller sur le site officiel, et il le gère : http://dean.edwards.name/IE7/

Mais attention : il s'agit en fait d'un package "Javascript" dédié à IE afin qu'il fonctionne comme tous les autres navigateurs (bah oui, c'est le seul navigateur actuel qui ne sait pas faire). Donc tu allègeras pour Google et les visiteurs ayant un vrai navigateur, mais tu allourdiras pour tous ceux qui ont IE.

PS : le gros avantage c'est de ne pas avoir à modifier ton code...

[achaternet]

Merci bool

ca reste trop relou

sniff.

[Bool]

bah... de rien... désolé de ne pas avoir su t'aider

[maxttb]

Bon, c'est à base de javascript, mais ce sera certainement beaucoup moins lourd que ta solution actuelle...
En gros, ca simule un :hover pour IE, très utile!
J'utilise ce bout de code que j'appelle dans le onload du body pour faire un rollover sur les LI d'un menu sous IE. Ca marche très bien jusqu'à maintenant, suffit de l'adapter pour les TR (au moins 2 caractères à modifier...)

Code: Tout sélectionner

startList = function()
{
   if (document.all&&document.getElementById)
   {
      navRoot = document.getElementById("menu").childNodes[1];
      
      for (i=0; i<navRoot.childNodes.length; i++)
      {
         node = navRoot.childNodes[i];
         
         if (node.nodeName=="LI")
         {
            node.onmouseover=function()
            {
               this.className+=" over";
            }

            node.onmouseout=function()
            {
               this.className=this.className.replace(" over", "");
                  }
         }
      }
   }
}
window.onload=startList;

Ensuite, dans mon CSS, je déclare

Code: Tout sélectionner

#menu ul li:hover ul,#menu ul .over ul
{
   display:block;
}

Pour faire apparaitre un menu déroulant sur mon menu, reste plus qu'à adapter pour changer la couleur de fond (au moins une ligne à changer...)

En esperant que cette première piste te soit utile...

[ecocentric]

sinon, tu peux jouer avec la propriété background-color au niveau des liens. Ca marche sous IE et les navigateurs basés sur Gecko.

[petit-ourson]

Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.

[ecocentric]

Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.

C'est à ça que je pensais : background-color + display:block. display:block ne marche pas sous IE4 mais au delà il n'y a pas de problème. Ca te fait des liens dont tout le fond se met dans la couleur de background quand tu passes au dessus. L'attribut display te permet de lui imposer de régler le background pour toute la largeur disponible, pas uniquement celle occupée par le lien. Tu as donc plus ou moins le même effet qu'en JS.

[Bool]

Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.

+1

[achaternet]

merci pour tes precisions ecocentric sur la compatibilité.


Plus precisement, ça donne ?


background-color + display:block

j'ai juste a modif mon css et dire que pour tous mes <tr> cette regle dans avec l action hover, et c tout??