Rollover css et pas de JS!

Discussion dans 'Administration d'un site Web' créé par achaternet, 19 Août 2004.

  1. achaternet
    achaternet WRInaute occasionnel
    Inscrit:
    11 Février 2003
    Messages:
    254
    J'aime reçus:
    0
    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

    :?:
     
  2. Bool
    Bool WRInaute passionné
    Inscrit:
    26 Février 2004
    Messages:
    1 598
    J'aime reçus:
    0
    Oui c'est tout à fait possible, mais IE lui ne sait pas faire...

    IE ne gère le :hover que sur les liens.
     
  3. achaternet
    achaternet WRInaute occasionnel
    Inscrit:
    11 Février 2003
    Messages:
    254
    J'aime reçus:
    0
    Ya pas de soluce alors :?: (notamment pour IE)

    Mon objectif, c est que ce soit compatible avec tous les navigateurs bien sur :)
     
  4. Bool
    Bool WRInaute passionné
    Inscrit:
    26 Février 2004
    Messages:
    1 598
    J'aime reçus:
    0
    Peux être avec "l'astuce" IE 7, mais je ne sais pas s'il gère les :hover
     
  5. Bool
    Bool WRInaute passionné
    Inscrit:
    26 Février 2004
    Messages:
    1 598
    J'aime reçus:
    0
    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...
     
  6. achaternet
    achaternet WRInaute occasionnel
    Inscrit:
    11 Février 2003
    Messages:
    254
    J'aime reçus:
    0
    Merci bool

    ca reste trop relou :!: :!:

    sniff. :cry:
     
  7. Bool
    Bool WRInaute passionné
    Inscrit:
    26 Février 2004
    Messages:
    1 598
    J'aime reçus:
    0
    bah... de rien... désolé de ne pas avoir su t'aider
     
  8. maxttb
    maxttb WRInaute occasionnel
    Inscrit:
    27 Février 2004
    Messages:
    473
    J'aime reçus:
    0
    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:
    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:
    #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...
     
  9. ecocentric
    ecocentric WRInaute accro
    Inscrit:
    10 Février 2004
    Messages:
    3 593
    J'aime reçus:
    0
    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.
     
  10. petit-ourson
    petit-ourson WRInaute impliqué
    Inscrit:
    31 Mai 2004
    Messages:
    854
    J'aime reçus:
    0
    Avec le display:block sur les liens, on peut aussi s'en tirer pas mal.
     
  11. ecocentric
    ecocentric WRInaute accro
    Inscrit:
    10 Février 2004
    Messages:
    3 593
    J'aime reçus:
    0
    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.
     
  12. Bool
    Bool WRInaute passionné
    Inscrit:
    26 Février 2004
    Messages:
    1 598
    J'aime reçus:
    0
    +1
     
  13. achaternet
    achaternet WRInaute occasionnel
    Inscrit:
    11 Février 2003
    Messages:
    254
    J'aime reçus:
    0
    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??