6

Considerando:

HTML

<div id="div1">
    <p>Elemento 1</p>
</div>
<div id="div2">
    <p>Elemento 2</p>
</div>

Como eu posso usar o :hover no div1 para mudar propriedades de estilo do div2?
Tentei o seguinte, mas sem sucesso:

CSS

#div2, #div1:hover {
    background-color: white;
}

Até o momento que o mouse entra no div1, funciona como eu quero, porém quando ele sai um problema surge: o div2 continua com o background-color: white. O que devo fazer (usando CSS) para fazer o fundo branco do div2 sumir junto com o fundo branco da outra div?

3
  • Você quer que o background da #div2 se altere quando passar o mouse em cima da #div1 (voltando ao normal ao sair)?
    – Wakim
    Commented 26/07/2014 às 1:17
  • @Wakim, exatamente.
    – ptkato
    Commented 26/07/2014 às 1:18
  • Apaguei minha resposta, não tinha intendido direito a pergunta, acho que o @Wakim já respondeu o que você precisava ^^
    – Alan PS
    Commented 26/07/2014 às 1:59

1 Resposta 1

8

O problema é que está aplicando a mesma regra para dois seletores independentes, usando a "," não é criada nenhuma relação entre os seletores.

Usando o seletor de irmão (General Sibling Selector) "~" você consegue aplicar a regra de hover no irmão cujo seletor esteja a direita. Dessa forma a regra fica:

#div1:hover ~ #div2 {
    background-color: white;
}

Lendo a regra seria:

Quando passar o mouse em cima do elemento com id div1, selecione todos os irmãos cujo id seja div2 e aplique a regra abaixo.

Dê uma olhada nesse JSFiddle para ver o código funcionando. No caso coloquei o fundo preto para ter contraste.

Existe uma variação, o seletor de irmão direto "+" que pega apenas os irmãos subsequente e antecedente aos elementos do seletor da esquerda, pode ser útil também.

Além desses, existe também o seletor de filho direto (Child Selector) ">", pode ser usado também, mas não para esse caso específico. E o seletor de descendente (Descendant Selector) " " (espaço), que é mais abrangente que o child selector.

Para mais detalhes de uma olhada em:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
2
  • Perfeita resposta, mas só para esclarecer, o ~ pega todos os seletores no mesmo nível e o + pega os seletores que estão imediatamente acima e abaixo?
    – ptkato
    Commented 26/07/2014 às 1:40
  • 1
    Exatamente, mas precisa pensar em árvores (O DOM é uma árvore), correto sobre o ~, no caso do + eles estão no mesmo nível, mas a grosso modo é o nó "esquerdo" e "direto" na sub-árvore que compõem todos os irmãos.
    – Wakim
    Commented 26/07/2014 às 1:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .