Il y a quelques jours, mon ami m'a demandé de l'aider à résoudre le problème qui était lors de son entretien. L'intervieweur lui a donné l'extrait de code suivant:
tbody:hover tr { opacity: 0.24; }
Également ajouté: «Maintenant, lorsque vous survolez la table, toutes les lignes deviennent fanées. Et vous devez vous assurer que la ligne que vous avez pointée reste active. »
Solution
Dans la solution actuelle, lorsque vous survolez l'élément tbody: hover, tous les éléments tr modifient immédiatement leur opacité à 0,24.
tbody:hover tr { opacity: 0.24; }
J'ai besoin de changer le sélecteur pour que l'opacité soit appliquée à tous les éléments tr à l'exception de celui indiqué.
Pour une telle implémentation, vous devrez utiliser le survol et non les pseudo-classes. À l'aide du survol, le navigateur déterminera que la ligne était pointée, et à l'aide de non, il comprendra qu'aucun style ne doit lui être appliqué.
tbody:hover tr:not(:hover) { opacity: 0.24; }
Devoirs
Pour consolider, j'ai préparé une tâche de devoirs dans laquelle il est nécessaire de corriger une erreur lors de l'affichage d'une image en texte. J'ai préparé le balisage et les styles suivants:
<main class="content"> <p>Some text</p> <img src="picture.jpg" alt="some alt"> <p>Some text</p> </main>
.content img { margin-top: 35px; margin-bottom: 35px; }
L'erreur est que si l'image est le premier élément, elle a toujours une marge en haut, mais vous devez vous assurer qu'elle n'existe pas.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
Par conséquent, si l'image est le dernier élément, vous devez supprimer le retrait du bas.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>