Alguns dias atrás, meu amigo pediu ajuda para resolver o problema que estava em sua entrevista. O entrevistador deu a ele o seguinte trecho de código:
tbody:hover tr { opacity: 0.24; }
Também foi adicionado: “Agora, quando você passa o mouse sobre a tabela, todas as linhas ficam desbotadas. E você precisa garantir que a linha que você apontou permaneça ativa. ”
Solução
Na solução atual, quando você passa o mouse sobre o elemento tbody: hover, todos os elementos tr alteram imediatamente sua opacidade para 0,24.
tbody:hover tr { opacity: 0.24; }
Preciso alterar o seletor para que a opacidade seja aplicada a todos os elementos tr, exceto o apontado.
Para essa implementação, você precisa usar o hover e não as pseudo-classes. Com a ajuda do hover, o navegador determinará que a linha foi apontada e, com a ajuda de não, entenderá que nenhum estilo deve ser aplicado a ela.
tbody:hover tr:not(:hover) { opacity: 0.24; }
Lição de casa
Para consolidar, preparei uma tarefa de lição de casa na qual é necessário corrigir um erro ao exibir uma imagem em texto. Eu preparei a seguinte marcação e 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; }
O erro é que, se a imagem for o primeiro elemento, ela ainda terá uma margem na parte superior, mas você precisará garantir que ela não exista.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
Portanto, se a imagem for o último elemento, será necessário remover o recuo da parte inferior.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>