Hace unos días, mi amigo me pidió que lo ayudara con la solución del problema que estaba en su entrevista. El entrevistador le dio el siguiente fragmento de código:
tbody:hover tr { opacity: 0.24; }
También agregó: “Ahora, cuando pasas el cursor sobre la mesa, todas las filas se desvanecen. Y debes asegurarte de que la línea a la que apuntaste permanezca activa ”.
Solución
En la solución actual, cuando pasa el cursor sobre el elemento tbody: hover, todos los elementos tr cambian inmediatamente su opacidad a 0.24.
tbody:hover tr { opacity: 0.24; }
Necesito cambiar el selector para que la opacidad se aplique a todos los elementos tr, excepto al señalado.
Para tal implementación, debe usar el elemento emergente y no las pseudo-clases. Con la ayuda de hover, el navegador determinará que la línea fue apuntada, y con la ayuda de no comprenderá que no se le deben aplicar estilos.
tbody:hover tr:not(:hover) { opacity: 0.24; }
Tarea
Para consolidar, preparé una tarea en la que es necesario corregir un error al mostrar una imagen en texto. Preparé el siguiente marcado y estilos:
<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; }
El error es que si la imagen es el primer elemento, todavía tiene un margen en la parte superior, pero debe asegurarse de que no exista.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
En consecuencia, si la imagen es el último elemento, debe eliminar la sangría de la parte inferior.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>