18041 sujets

Questions générales et questions de débutants

[Résolu] OnMouseover et CSS

Bonjour à tous,

J'ai un tableau style planning avec des jours et des renseignements relatifs dans des cellules avoisinantes.

Exemple HTML

<table class="jours">

<tr><th>Lundi</th><td>18h15</td></tr>

<tr><th>Mardi</th><td>10h30</td></tr>

<tr><th>Mercredi</th><td>11h00</td></tr>

<tr><th>Jeudi</th><td>18h15</td></tr>

</table>


Si je mets un onMouseover dans l'une des balises th ou td, le changement se réalise pour la cellule en question. Mais cela ne marche pas pour la balise tr. Y aurait-il une possibilité pour qu'au passage de la souris sur n'importe quelle cellule de la ligne l'apparence de cette dernière soit modifiée ?

Par ailleurs, faut-il réécrire les fonctions onMouseover, onMouseout après chaque balise ? Peut-on combiner avec CSS ?

D'avance, merci beaucoup.
Modifié par pat57 (01 Sep 2007 - 12:37)
Salut,

le onmouseover fonctionne également sur le <tr> Smiley rolleyes .

Pour ce qui est du css, le code suivant devrait suffire :
tr:hover {
	background-color:red;
	...
}
Malheureusement IE6 ne l'interprète pas Smiley confus !

A+
Merci Heyoan, ça marche !

Mes problèmes venaient :
1. de ma feuille de style incomplète ;
2. de WebExpert 6, dont la pré-visualisation me semble correspondre à IE6
En fait, j'aimerais approfondir un peu Smiley confus ...

Si j'écris

tr:hover {...}

la ligne sera modifiée uniformément.

Or, mes cellules ont des classes différentes.

CSS

.jr {
width: 100px;
padding-left: 3px;
text-align: left;	
font-weight: normal;
background-color: #abcdef;
}

.hr {
width: 100px;
text-align: center;
}[code]

HTML
[code]
  <table>
	 <tr><th class="jr">Lundi</th><td class="hr">18h30</td><td>info1</td></tr>
	 <tr><th class="jr">Mardi</th><td class="hr">20h30</td><td>info2</td></tr>
	 <tr><th class="jr">Mercredi</th><td class="hr">18h30</td><td>info3</td></tr>
	 <tr><th class="jr">Jeudi</th><td class="hr">18h30</td><td>info4</td></tr>
	 <tr><th class="jr">Vendredi</th><td class="hr">18h30</td><td>info5</td></tr>
  </table>


Je souhaiterais qu'au passage de la souris sur n'importe quelle cellule d'une ligne, la classe soit modifiée.

Exemple :
le background des jours serait plus foncé et l'écriture blanche, tandis que les horaires et infos seraient en rouge. Est-ce possible en CSS ?

Merci pour l'aide.
Salut,

Au lieu de sélectionner tr:hover dans ta css, tu devrais sélectionner séparément th:hover et donner le style que tu veux, et faire de même avec td:hover. Smiley cligne
En complément (et à condition que j'aie bien compris Smiley biggol ) pour que le <th> et le <td> soient modifiés en même temps il faudrait mettre :
tr:hover th.jr {
	background-color:#ghijkl;
	color:#fff;
}
tr:hover td {
	color:red;
}

A+
Modifié par Heyoan (31 Aug 2007 - 09:42)
Oui, je l'ai fait dans ma CSS


th.jr:hover {
background-color: #3975AD;
font-weight: bold;
color: white;
}

td.hr:hover {
width: 100px;
text-align: center;
font-weight: bold;	
color: red;
}


Mais écrit comme cela, seule la cellule sur laquelle passe la souris est modifiée et non les autres cellules de la ligne.
pat57 a écrit :
Mais écrit comme cela, seule la cellule sur laquelle passe la souris est modifiée et non les autres cellules de la ligne.

Mais faire un effet de survol sur la partie concernée uniquement semble bien plus logique que sur toute la ligne. Le visiteur risque de penser que toute la ligne n'est qu'un seul lien, alors qu'en réalité ce n'est pas le cas. A mon sens, c'est une erreur ergonomique.
Tout dépendant des infos à fournir...

Une modification de toute une ligne ou de plusieurs cellules d'une même ligne permet de relever certains détails, tels le jour et l'heure d'un concert par exemple.
Sujet clos
Aller à