Vor ein paar Tagen bat mein Freund um Hilfe bei der Lösung des Problems, das bei seinem Interview auftrat. Der Interviewer gab ihm den folgenden Code-Ausschnitt:
tbody:hover tr { opacity: 0.24; }
Außerdem wurde hinzugefügt: „Wenn Sie jetzt mit der Maus über die Tabelle fahren, werden alle Zeilen ausgeblendet. Und Sie müssen sicherstellen, dass die Linie, auf die Sie gezeigt haben, aktiv bleibt. “
Lösung
Wenn Sie in der aktuellen Lösung mit der Maus über das Element tbody: hover fahren, ändern alle tr-Elemente sofort ihre Deckkraft auf 0,24.
tbody:hover tr { opacity: 0.24; }
Ich muss den Selektor so ändern, dass die Deckkraft auf alle tr-Elemente mit Ausnahme desjenigen angewendet wird, auf das gezeigt wird.
Eine solche Implementierung würde die Verwendung des Schwebefluges und nicht der Pseudoklassen erfordern. Mit Hilfe von Hover ermittelt der Browser, ob die Linie gezeigt wurde, und mit Hilfe von Nicht wird nicht verstanden, dass keine Stile darauf angewendet werden sollten.
tbody:hover tr:not(:hover) { opacity: 0.24; }
Hausaufgaben
Zur Konsolidierung habe ich eine Hausaufgabe vorbereitet, bei der ein Fehler bei der Anzeige eines Bildes im Text behoben werden muss. Ich habe die folgenden Markups und Stile vorbereitet:
<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; }
Der Fehler besteht darin, dass das Bild, wenn es das erste Element ist, immer noch einen Rand oben hat, Sie jedoch sicherstellen müssen, dass es nicht vorhanden ist.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
Wenn das Bild das letzte Element ist, müssen Sie den Einzug von unten entfernen.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>