28211 sujets

CSS et mise en forme, CSS3

Changer le background-color d'une balise tr dans un div

Pages :
Bonjour à tous ceux qui prendrons le temps de me lire (et aussi aux autres)

Afin de remplacer une fonction Javascript qui avait pour but de changer la couleur d'une ligne d'un tableau (déclenchée par l'évenement onMouseOver) et dans un soucis de me débarrasser au maximum du JS, j'essaye de remplacer cette fonction par un style CSS

Afin de remplacer l'évenement onMouseOver, j'ai voulu utiliser la pseudo classe :hover
Comme cette pseudo-classe ne fonctionne pas sous IE pour les balises <tr>, j'ai encadré ma ligne par une balise <div> à laquelle j'attribue une classe.

Or, impossible de changer le background-color du tr contenu dans ma balise <div>

Est-ce qu'il est impossible d'encadrer une ligen par un div ?
Est-ce une erreur de syntaxe ?

Pour info, mon code HTML est géneré par PHP (le nom de la classe)
Je vous donnes le code HTML généré et ma feuille CSS

<!-- Lien pour afficher la description de la facture -->
<div class="commande_erronee">
	<tr onMouseOver="this.style.cursor='hand';" 
		onMouseOut="this.style.cursor='default';">
		<td>FR</td>												<!-- Pays de la facture -->
		<td align="center">xxxx</td>			<!-- Numéro de la facture -->
		<td >xxx</td>											<!-- Nombre de pneus de la facture, selon Sales Admin -->
		<td align="right">xxx &euro;</td>	<!-- Montant total de la facture, selon Sales Admin -->
		<td align="right">xxx</td>				<!-- Nombre de pneus de la facture, selon la facture électronique -->
		<td align="right">xxx &euro;</td>	<!-- Montant total de la facture, selon la facture électronique -->
		<td >&nbsp;</td>									<!-- Erreur de transfert -->
		<td align="center"><input type="checkbox" name="gestFact_xx_xx_traite_pmt" /></td>
	</tr>
</div>


div.commande_erronee tr {
	background-color: #D75951;
}

div.commande_erronnee:hover tr {
	background-color: #F97B73;
}

Modifié par Zeus (07 Dec 2005 - 09:53)
Bonjour,

je ne sais pas si ca marche, mais essaye avec ca Smiley smile 


div.commande_erronee tr {
   background-color: #D75951;
}

div.commande_erronnee tr:hover {
   background-color: #F97B73;
}
En fait, mon probleme vient du fait que le 1er style ne modifie pas la couleur de fond de mon tr

Toutes mes lignes sont blanches au lieu d'être rouge
salut

voila ce que tu devrai mettre en css

.commande_erronee
{
background-color: #D75951;
}
.commande_erronee
{
background-color: #F97B73;
}

et ensuite tu vire les div dans ta page html
et tu met

<tr class="code_erronee">
Il faut agir directement sur les tr alors:


tr.ligne {
	background-color: #D75951;
}
tr.ligne:hover{
	background-color: #F97B73;
}


et au lieu de mettre la classe dans le div tu la mets dans le tr :

<tr class="ligne">


ca devrait marche comme ca Smiley smile
Modifié par notoon (07 Dec 2005 - 10:17)
C'est ce que je faisait au départ, mais je ne peut plus utiliser la pseudo-class :hover sur un <tr> sous IE
tu n'es pas obligé de marque 

tr.code_erronee{}


le tr devant signifie juste que cela ne sera utilisé que pour les tr
ce que je voulais dire, c'est que si j'écris
tr.commande_erronnee:hover, sous IE, ça ne marche pas ...
et bien ne met pas le tr dans tr.code_erronee:hover
met juste .code_erronee:hover

et tu fais pareil sans le hover
Modifié par misterinfo (07 Dec 2005 - 10:33)
ça revient au même

Du moment que j'applique :hover sur un tr (même via un style CSS), IE ne le reconnait pas
Ma feuille de style est externe et je suis sûr que je pointe sur la bonne

Mon code dans l'état actuel :
<tr class="commande_erronee"
	onMouseOver="this.style.cursor='hand';" 
	onMouseOut="this.style.cursor='default';">
	<td>FR</td>												<!-- Pays de la facture -->
	<td align="center">xxxx</td>			<!-- Numéro de la facture -->
	<td >xxx</td>											<!-- Nombre de pneus de la facture, selon Sales Admin -->
	<td align="right">xxx &euro;</td>	<!-- Montant total de la facture, selon Sales Admin -->
	<td align="right">xxx</td>				<!-- Nombre de pneus de la facture, selon la facture électronique -->
	<td align="right">xxx &euro;</td>	<!-- Montant total de la facture, selon la facture électronique -->
	<td >&nbsp;</td>									<!-- Erreur de transfert -->
	<td align="center"><input type="checkbox" name="gestFact_xx_xx_traite_pmt" /></td>
</tr>


.commande_erronee {
	background-color: #D75951;
}

.commande_erronee:hover {
	background-color: #F97B73;
}
ferme ta balise tr

si ton site est en ligne en plus met moi le lien stp
Modifié par misterinfo (07 Dec 2005 - 10:50)
c'est un problème de copier/coller

dans ma balise tr, j'ai du code JS que j'enlève pour question de lisibilité et j'a trop supprimé Smiley confused
c'est un intranet loacl

de plus, il contient des données sensibles

Mais je vais essayé de te faire un résumé
le lien que j'ai donné permet l'affichage d'un exemple de la page
si tu veux les fichiers, C'est ici
Modifié par Zeus (07 Dec 2005 - 12:22)
Bonjour Zeus

Voici un début de piste, une petite éclaircie.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>contour hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
td{
	background-color: #FFFFFF;
	height:30px;
}
td a{
    border:1px solid #CCCC00;
	background-color: #CCCC00;
	display:block;
	height:30px;	
}
td a:hover{
	border:1px solid #000000;
	background-color: #CCCC00;
	height: 30px;
}
-->
</style>
</head>
<body>
<table width="200">
  <tr>
    <td><a href="#">abcdefgh</a></td>
    <td><a href="#">abcdefgh</a></td>
    <td><a href="#">abcdefgh</a></td>
  </tr>
</table>
</body>
</html>


@+
Pages :
Sujet clos
Aller à