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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[CSS] Simulation :hover sur parent</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1879120">
<style>
html, body {
margin: 0;
padding: 0;
font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
display: block;
position: relative;
margin: 0 auto 2em;
max-width: 60em;
}
section, .section {
position: relative;
margin: 0 2em 1em;
}
h1, h2, h3 {
color: #069;
}
code {
font-family: "courier new";
font-size: 1em;
color: #069;
}
q {
display: block;
position: relative;
margin: 0;
padding: .5em;
border: 1px solid #FB5;
border-left: .35em solid #FB5;
background: #FFD;
}
table {
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 .5em #888;
cursor: pointer;
border: 1px solid #888;
}
thead {
text-shadow: 1px 1px 1px #FFF;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
}
tr {
position: relative; /* pour servir de référent */
display: block;
}
th, td {
padding: .5em;
width: 8em;
min-width: 8em;
border-right:1px solid #888;
border-top: 1px solid #888;
}
th {
border-top: 1px solid #FFF;
}
th +th,
td +td{
border-left:1px solid #FFF;
}
th:last-child,
td:last-child{
border-right:0;
}
td p {
color: #00F;
margin: 0;
}
td p::before {
content: "";
z-index: -1;
position: absolute; /* par rapport à <tr> donc */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
td p:hover::before {
background: #CDE;
}
</style>
</head>
<body>
<main>
<header>
<h1>Simulation <code>:hover</code> sur parent</h1>
<p>On ne simule qu'un changement de la couleur de fond de la <code><tr></code> et éventuellement la bordure, mais pas plus.
</header>
<section>
<h2>Le rendu</h2>
<table>
<thead>
<tr>
<th>Colonne #1</th>
<th>Colonne #2</th>
<th>Colonne #3</th>
<th>Colonne #4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col #1 Lig #1</td>
<td><p>:hover</p></td>
<td>Col #3 Lig #1</td>
<td>Col #4 Lig #1</td>
</tr>
<tr>
<td><p>:hover</p></td>
<td>Col #2 Lig #2</td>
<td>Col #3 Lig #2</td>
<td>Col #4 Lig #2</td>
</tr>
<tr>
<td>Col #1 Lig #3</td>
<td>Col #2 Lig #3</td>
<td><p>:hover</p></td>
<td>Col #4 Lig #3</td>
</tr>
<tr>
<td>Col #1 Lig #4</td>
<td>Col #2 Lig #4</td>
<td><p>:hover</p></td>
<td>Col #4 Lig #4</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Quelques explications</h2>
<p>Pour ne cibler que quelques éléments de la <code><table></code> nous utilisons, pour l'exemple, la structure HTML simplifiée suivante :
<p><code><td><br> <p>:hover</p><br></td></code>
<p>On va jouer avec le pseudo-élément <code>:before</code> de l'élément qui, survolé, doit déclencher le changement de couleur de fond de sa <code><tr></code> parent.
<p>Ce pseudo-élément est déclaré en <code>position:absolute</code> et sera donc positionné par rapport à son premier parent lui même positionné, <i>le grand classique</i>.
<p>Il nous faut donc déclarer les <code><tr></code> en <code>position:relative</code> pour qu'elles servent de référent, seulement voilà seul FireFox, <i>à ce jour</i>, reconnaît ce positionnement sur des éléments en <code>display:table-xxxx</code> et ce en dépit de la recommandation, voir <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">Choosing a positioning scheme: 'position' property</a>.
<p><q>The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.</q>
<p>Il nous faut donc déclarer les <code><tr></code> en <code>display:block</code>, ou <code>display:flex</code>, ou encore changer la structure HTML mais le principe reste le même.
<p>Le pseudo-élément <code>:before</code> est placé en arrière plan avec un <code>z-index:-1</code> et fait la dimension du parent positionné. Il suffit de changer sa couleur de fond sur le <code>:hover</code> du parent direct et le tour est joué.
<p>La <code><table></code> ne doit pas avoir de <code>background-color</code>.
<p>Comme il n'y a plus de relation dimensionnelle entre les enfants des <code><tr></code>, il faut définir la largeur de ceux-ci.
</section>
</main>
</body>
</html> |
