[CSS] problème de hover

**GLDavid** · 07/08/2006, 15h42

Bonjour

Dans ma CSS, je voudrais faire en sorte de colorer différemment les lignes d'un tableau au passage de la souris. Voici l'extrait de CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
.line{
	text-align: center;
	background-color: silver;
}
 
.lastline{
	border-collapse: collapse;
	border-bottom: 3px solid black;
	text-align: center;
	background-color: silver;
}
 
.line:hover{
	background-color: #B4FF8E;
	text-align: center;
}
 
.lastline:hover{
	border-collapse: collapse;
	border-bottom: 3px solid black;
	text-align: center;
	background-color: #B4FF8E;
}

Et voici comment j'affiche mon tableau (ceci est fait depuis une page JSP, d'où le code Java) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
out.print("<tr class=\"line\">");
					out.print("<td><a href=\"Details.jsp?num="+rs.getLong("num_amplicon")+"\" target=\"_blank\">"+rs.getRow()+"</a></td>");
					out.print("<td>"+rs.getInt("length")+"</td>");
					java.text.DecimalFormat df = new java.text.DecimalFormat("###.00");
					out.print("<td>"+df.format(rs.getFloat("GCpercent"))+"</td>");
					java.sql.ResultSet rs2 = dc.select("select PLstart, PLend, PLsequence, PRstart, PRend, PRsequence from Primers where num_amplicon="+rs.getLong("num_amplicon")+"");
					while(rs2.next()){
						out.print("<td>"+rs2.getLong("PLstart")+"</td>");
						out.print("<td>"+rs2.getLong("PLend")+"</td>");
						out.print("<td><span class=\"sequence\">"+rs2.getString("PLsequence")+"</span></td>");
						out.print("<td>"+rs2.getLong("PRstart")+"</td>");
						out.print("<td>"+rs2.getLong("PRend")+"</td>");
						out.print("<td><span class=\"sequence\">"+rs2.getString("PRsequence")+"</span></td>");
					}
/*Blabla*/
out.print("<tr>");
					out.print("<td class=\"lastline\"><a href=\"Details.jsp?num="+rs.getLong("num_amplicon")+"\" target=\"_blank\">"+rs.getRow()+"</a></td>");
					out.print("<td class=\"lastline\">"+rs.getInt("length")+"</td>");
					java.text.DecimalFormat df = new java.text.DecimalFormat("###.00");
					out.print("<td class=\"lastline\">"+df.format(rs.getFloat("GCpercent"))+"</td>");
					java.sql.ResultSet rs2 = dc.select("select PLstart, PLend, PLsequence, PRstart, PRend, PRsequence from Primers where num_amplicon="+rs.getLong("num_amplicon")+"");
					while(rs2.next()){
						out.print("<td class=\"lastline\">"+rs2.getLong("PLstart")+"</td>");
						out.print("<td class=\"lastline\">"+rs2.getLong("PLend")+"</td>");
						out.print("<td class=\"lastline\"><span class=\"sequence\">"+rs2.getString("PLsequence")+"</span></td>");
						out.print("<td class=\"lastline\">"+rs2.getLong("PRstart")+"</td>");
						out.print("<td class=\"lastline\">"+rs2.getLong("PRend")+"</td>");
						out.print("<td class=\"lastline\"><span class=\"sequence\">"+rs2.getString("PRsequence")+"</span></td>");
					}
					out.print("</tr>");

Seulement, bien que mes lignes aient la bonne couleur initiale, rien ne se passe quand la souris est sur la dite-ligne.
Me suis-je trompé quelque part ?

Merci d'avance.

@++

**KiLVaiDeN** · 07/08/2006, 15h44

Salut,

Ce serait plus sympatique de nous montrer le code source généré HTML

J'ai l'impression que tes styles se superposent, non ?

**tigunn** · 07/08/2006, 15h51

Salut GLDavid !

juste un éceuil visible au loin pour ton problème :

IE ne gère la pseudo classe hover que pour les éléments a (que pour les liens...)

c'est peut être inutile, mais un programmeur avertit en vaut deux.

bondev'

**GLDavid** · 07/08/2006, 16h03

Salut KiLVaiDeN

Voici le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GLDavid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="results.js"></script>
<div class="logo"><a href="http://www.gldavid.com" target="_blank"><img
	src="./img/minilogo.jpg" alt="GLDavid" class="image"></a>
<div class="tete"><b><u>Archives</u></b></div>
</div>
 
<div class="general_results_panel">
<form action="archives.jsp" method="post">Results page: <select id="page" onChange="redirect2('7167fb7ba4806e855959d04f940480921154944860')"><OPTION VALUE="1" SELECTED>1<OPTION VALUE="2">2<OPTION VALUE="3">3<OPTION VALUE="4">4<OPTION VALUE="5">5<OPTION VALUE="6">6<OPTION VALUE="7">7<OPTION VALUE="8">8<OPTION VALUE="9">9<OPTION VALUE="10">10<OPTION VALUE="11">11<OPTION VALUE="12">12<OPTION VALUE="13">13<OPTION VALUE="14">14<OPTION VALUE="15">15<OPTION VALUE="16">16<OPTION VALUE="17">17<OPTION VALUE="18">18<OPTION VALUE="19">19<OPTION VALUE="20">20<OPTION VALUE="21">21</select></form><div class="subpanel2"><table align="center" class="resultats" cellspacing="10" cellpadding="5">
 
<tr><td class="titre"></td><td class="titre" colspan="2">Amplicon</td><td class="titre" colspan="3">Primer left</td><td class="titre" colspan="3">Primer right</td></tr>
<tr><td class="titre2" width="5%"></td><td class="titre2" width="5%">Length</td><td class="titre2" width="5%">GC %</td><td class="titre2" width="5%">Start</td><td class="titre2" width="5%">End</td><td class="titre2" width="35%">Sequence</td><td class="titre2" width="5%">Start</td><td class="titre2" width="5%">End</td><td class="titre2" width="35%">Sequence</td></tr>
<tr class="line"><td><a href="Details.jsp?num=24115" target="_blank">1</a></td><td>52</td><td>55,77</td><td>96</td><td>116</td><td><span class="sequence">ACCAAGAAGCTGAGCGAGTGT</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24116" target="_blank">2</a></td><td>53</td><td>54,72</td><td>96</td><td>116</td><td><span class="sequence">ACCAAGAAGCTGAGCGAGTGT</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24117" target="_blank">3</a></td><td>52</td><td>55,77</td><td>96</td><td>117</td><td><span class="sequence">ACCAAGAAGCTGAGCGAGTGTC</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24118" target="_blank">4</a></td><td>53</td><td>54,72</td><td>96</td><td>117</td><td><span class="sequence">ACCAAGAAGCTGAGCGAGTGTC</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24119" target="_blank">5</a></td><td>51</td><td>56,86</td><td>97</td><td>116</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGT</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24120" target="_blank">6</a></td><td>52</td><td>55,77</td><td>97</td><td>116</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGT</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24121" target="_blank">7</a></td><td>51</td><td>56,86</td><td>97</td><td>117</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGTC</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24122" target="_blank">8</a></td><td>52</td><td>55,77</td><td>97</td><td>117</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGTC</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24123" target="_blank">9</a></td><td>51</td><td>56,86</td><td>97</td><td>118</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGTCT</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24124" target="_blank">10</a></td><td>52</td><td>55,77</td><td>97</td><td>118</td><td><span class="sequence">CCAAGAAGCTGAGCGAGTGTCT</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24125" target="_blank">11</a></td><td>50</td><td>56,00</td><td>98</td><td>117</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTC</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24126" target="_blank">12</a></td><td>51</td><td>54,90</td><td>98</td><td>117</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTC</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24127" target="_blank">13</a></td><td>57</td><td>54,39</td><td>98</td><td>117</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTC</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24128" target="_blank">14</a></td><td>57</td><td>54,39</td><td>98</td><td>117</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTC</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24129" target="_blank">15</a></td><td>50</td><td>56,00</td><td>98</td><td>118</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTCT</span></td><td>147</td><td>127</td><td><span class="sequence">TACTGTCCAGTTCGTCCCCGA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24130" target="_blank">16</a></td><td>51</td><td>54,90</td><td>98</td><td>118</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTCT</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24131" target="_blank">17</a></td><td>57</td><td>54,39</td><td>98</td><td>118</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTCT</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24132" target="_blank">18</a></td><td>57</td><td>54,39</td><td>98</td><td>118</td><td><span class="sequence">CAAGAAGCTGAGCGAGTGTCT</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24133" target="_blank">19</a></td><td>50</td><td>54,00</td><td>99</td><td>118</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCT</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24134" target="_blank">20</a></td><td>56</td><td>53,57</td><td>99</td><td>118</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCT</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24135" target="_blank">21</a></td><td>56</td><td>53,57</td><td>99</td><td>118</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCT</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24136" target="_blank">22</a></td><td>50</td><td>54,00</td><td>99</td><td>121</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAA</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24137" target="_blank">23</a></td><td>56</td><td>53,57</td><td>99</td><td>121</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24138" target="_blank">24</a></td><td>56</td><td>53,57</td><td>99</td><td>121</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24139" target="_blank">25</a></td><td>50</td><td>54,00</td><td>99</td><td>122</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAAG</span></td><td>148</td><td>128</td><td><span class="sequence">TTACTGTCCAGTTCGTCCCCG</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24140" target="_blank">26</a></td><td>56</td><td>53,57</td><td>99</td><td>122</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24141" target="_blank">27</a></td><td>56</td><td>53,57</td><td>99</td><td>122</td><td><span class="sequence">AAGAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24142" target="_blank">28</a></td><td>55</td><td>54,55</td><td>100</td><td>121</td><td><span class="sequence">AGAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24143" target="_blank">29</a></td><td>55</td><td>54,55</td><td>100</td><td>121</td><td><span class="sequence">AGAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24144" target="_blank">30</a></td><td>55</td><td>54,55</td><td>100</td><td>122</td><td><span class="sequence">AGAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24145" target="_blank">31</a></td><td>55</td><td>54,55</td><td>100</td><td>122</td><td><span class="sequence">AGAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24146" target="_blank">32</a></td><td>54</td><td>55,56</td><td>101</td><td>121</td><td><span class="sequence">GAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24147" target="_blank">33</a></td><td>54</td><td>55,56</td><td>101</td><td>121</td><td><span class="sequence">GAAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24148" target="_blank">34</a></td><td>54</td><td>55,56</td><td>101</td><td>122</td><td><span class="sequence">GAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24149" target="_blank">35</a></td><td>54</td><td>55,56</td><td>101</td><td>122</td><td><span class="sequence">GAAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24150" target="_blank">36</a></td><td>53</td><td>54,72</td><td>102</td><td>121</td><td><span class="sequence">AAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24151" target="_blank">37</a></td><td>53</td><td>54,72</td><td>102</td><td>121</td><td><span class="sequence">AAGCTGAGCGAGTGTCTCAA</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24152" target="_blank">38</a></td><td>53</td><td>54,72</td><td>102</td><td>122</td><td><span class="sequence">AAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>131</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTCC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24153" target="_blank">39</a></td><td>53</td><td>54,72</td><td>102</td><td>122</td><td><span class="sequence">AAGCTGAGCGAGTGTCTCAAG</span></td><td>154</td><td>132</td><td><span class="sequence">TCCATGTTACTGTCCAGTTCGTC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24154" target="_blank">40</a></td><td>56</td><td>58,93</td><td>127</td><td>147</td><td><span class="sequence">TCGGGGACGAACTGGACAGTA</span></td><td>182</td><td>164</td><td><span class="sequence">GTCCACGGCGGCAATCATC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24155" target="_blank">41</a></td><td>55</td><td>58,18</td><td>127</td><td>147</td><td><span class="sequence">TCGGGGACGAACTGGACAGTA</span></td><td>181</td><td>165</td><td><span class="sequence">TCCACGGCGGCAATCAT</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24156" target="_blank">42</a></td><td>56</td><td>58,93</td><td>127</td><td>147</td><td><span class="sequence">TCGGGGACGAACTGGACAGTA</span></td><td>182</td><td>165</td><td><span class="sequence">GTCCACGGCGGCAATCAT</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24157" target="_blank">43</a></td><td>57</td><td>57,89</td><td>127</td><td>147</td><td><span class="sequence">TCGGGGACGAACTGGACAGTA</span></td><td>183</td><td>166</td><td><span class="sequence">TGTCCACGGCGGCAATCA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24158" target="_blank">44</a></td><td>55</td><td>60,00</td><td>128</td><td>148</td><td><span class="sequence">CGGGGACGAACTGGACAGTAA</span></td><td>182</td><td>164</td><td><span class="sequence">GTCCACGGCGGCAATCATC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24159" target="_blank">45</a></td><td>54</td><td>59,26</td><td>128</td><td>148</td><td><span class="sequence">CGGGGACGAACTGGACAGTAA</span></td><td>181</td><td>165</td><td><span class="sequence">TCCACGGCGGCAATCAT</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24160" target="_blank">46</a></td><td>55</td><td>60,00</td><td>128</td><td>148</td><td><span class="sequence">CGGGGACGAACTGGACAGTAA</span></td><td>182</td><td>165</td><td><span class="sequence">GTCCACGGCGGCAATCAT</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24161" target="_blank">47</a></td><td>56</td><td>58,93</td><td>128</td><td>148</td><td><span class="sequence">CGGGGACGAACTGGACAGTAA</span></td><td>183</td><td>166</td><td><span class="sequence">TGTCCACGGCGGCAATCA</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24162" target="_blank">48</a></td><td>52</td><td>57,69</td><td>131</td><td>154</td><td><span class="sequence">GGACGAACTGGACAGTAACATGGA</span></td><td>182</td><td>164</td><td><span class="sequence">GTCCACGGCGGCAATCATC</span></td></tr><tr class="line"><td><a href="Details.jsp?num=24163" target="_blank">49</a></td><td>51</td><td>56,86</td><td>131</td><td>154</td><td><span class="sequence">GGACGAACTGGACAGTAACATGGA</span></td><td>181</td><td>165</td><td><span class="sequence">TCCACGGCGGCAATCAT</span></td></tr><tr><td class="lastline"><a href="Details.jsp?num=24164" target="_blank">50</a></td><td class="lastline">52</td><td class="lastline">57,69</td><td class="lastline">131</td><td class="lastline">154</td><td class="lastline"><span class="sequence">GGACGAACTGGACAGTAACATGGA</span></td><td class="lastline">182</td><td class="lastline">165</td><td class="lastline"><span class="sequence">GTCCACGGCGGCAATCAT</span></td></tr></table></div>
 
</div>

Merci aussi à tigunn de son conseil.

@++

**KiLVaiDeN** · 07/08/2006, 16h33

Salut,

Avec un style je n'y arrive pas, peut-être que SpaceFrog a une idée, si il est dans les parrages.

Par contre, ceci fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<table border="1">
  <tr bgcolor="#ff0000" onMouseOut="this.style.backgroundColor='#ff0000'" onMouseOver="this.style.backgroundColor='#00ff00'">
    <td>test</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

**GLDavid** · 07/08/2006, 16h55

Etonnant qu'avec un stylesheet, on ne puisse pas faire ça

Je prend ta solution alternative "de secours" et je te remercie bien bas KiLVaiDeN

@++

**masu** · 08/08/2006, 12h00

A cause de IE qui n'accepte pas la pseudo class :hover sur autre chose qu'un lien, je pense qu'il n'est pas possible de faire ca en full css. Cependant on peut quand meme utiliser les class css pour definir le style.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<table>
<tr class="line" onMouseOut="this.className='line'" onMouseOver="this.className='lineOver'">
<td>dummy</td><td>text</td>
</tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.line{
	text-align: center;
	background-color: silver;
}
 
.lineOver{
	background-color: #B4FF8E;
	text-align: center;
}

**GLDavid** · 08/08/2006, 12h11

Hmm; ok.
Je vous remercie tous de votre aide. J'ai donc implémenté cette gestion directement dans le HTML. Ca fait pas très propre, mais c'est une solution qui me satisfait pour le moment.

@++

**masu** · 08/08/2006, 12h25

je n'aime pas non plu avoir du javascript au milieu de mon code html. Mais par exemple on peut tout a fais ajouter ce commportement simplement en faisant un lien vers un js externe qui s'accupera de tout.

Ainsi on a le html vierge de tout js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table>
<tr class="line">
<td>dummy</td><td>text</td>
</tr>
<tr class="line">
<td>dummy</td><td>text</td>
</tr>
</table>

et le js independant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload = function () {
  trOver();
}
 
var NORMAL = 'line';
var OVER = 'lineOver';
 
function trOver() {
	var trs = document.getElementsByTagName('tr');
	var num = trs.length;
	for (var i=0; i<num; i++) {
		trs[i].onmouseover = function() { this.className=OVER; };
		trs[i].onmouseout  = function() { this.className=NORMAL; };
	}
}

[CSS] problème de hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager