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:
- https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors