[Dúvida] Posso ,utilizando o :hover, estilizar um outro elemento? | HTML e CSS: cabeçalho, footer e variáveis CSS

Olá! Tudo na paz, sim! É possível utilizar o seletor :hover para estilizar um elemento B quando o elemento A estiver com o mouse sobre ele. Isso pode ser feito usando CSS.

Aqui está um exemplo de como você pode fazer isso:

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="elementoA" href="#">Elemento A (âncora)</a>
  <div class="elementoB">Elemento B</div>
</body>
</html>

CSS (styles.css):

.elementoB {
  opacity: 0; /* Inicialmente, elemento B estará invisível */
  transition: opacity 0.3s; /* Adicionando uma transição suave */
}

.elementoA:hover + .elementoB {
  opacity: 1; /* Quando o elemento A estiver em hover, torna o elemento B visível */
}

Explicação:

Definimos o estilo do elementoB, inicialmente com opacity: 0; para torná-lo invisível.
Utilizamos o seletor .elementoA:hover + .elementoB para estilizar o elementoB quando o elementoA estiver em :hover.
Quando o elementoA estiver com o mouse em cima (hover), a regra de estilo opacity: 1; será aplicada ao elementoB, tornando-o visível.

Dessa forma, ao passar o mouse sobre o elementoA, o elementoB receberá um destaque (tornando-se visível).

Espero que isso ajude! Se você tiver mais dúvidas ou precisar de outras informações, sinta-se à vontade para perguntar.

Mergulhe em programação