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> |
Partager