Como - Exibir um elemento ao passar o mouse
Saiba como exibir um elemento ao passar o mouse.
Passe o mouse sobre mim.
I am shown when someone hovers over the div above.
Como exibir um elemento ao passar o mouse
Etapa 1) Adicionar HTML:
Exemplo
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
Etapa 2) Adicionar CSS:
Exemplo
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
Exemplo explicado
O seletor irmão adjacente ( +
) seleciona todos os elementos que são irmãos adjacentes de um elemento especificado.
A palavra "adjacente" significa "a seguir imediatamente", e o exemplo acima seleciona todos os elementos com class=".hide"
, que são colocados imediatamente após os elementos com class=".myDIV
", ao passar o mouse.
Acesse nosso Tutorial de Combinadores de CSS para saber mais sobre seletores adjacentes.