Olá pessoal tudo na paz? Posso ,utilizando o :hover, estilizar um outro elemento?
Elemento A (exemplo uma ancora) Quanto o mouse estiver "hover" elemento A quero dar um destaque no Elemento B.
Muito obrigado pela ajuda.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá pessoal tudo na paz? Posso ,utilizando o :hover, estilizar um outro elemento?
Elemento A (exemplo uma ancora) Quanto o mouse estiver "hover" elemento A quero dar um destaque no Elemento B.
Muito obrigado pela ajuda.
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:
elementoB, inicialmente com opacity: 0; para torná-lo invisível..elementoA:hover + .elementoB para estilizar o elementoB quando o elementoA estiver em :hover.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.
Boa!!! Muito obrigado pela ajuda. Abs.