Ajuda com seletores filhos (hover) - CSS

[Antonio Netto 0]

Pessoal... estou fazendo um efeito para o meu site, pois bem, para isso estou usando li, e dentro dos li os links, cabeçalho e a foto para exibição, até ai tudo bem. Coloquei pra cada li ter uma imagem e um cabeçalho correspondente, porem quero que a imagem junto do cabeçalho façam o "hover" juntos, ou seja quando usuário passar o ponteiro na foto altere a cor do cabeçalho e vice versa.

 

Segue o endereço da página: http://www.acheicampos.com/debug/

 

Segue imagem do meu código:

 

 

Desde já agradeço a ajuda de todos!

[pwd 7]

Hey cara, blzs?

 

Bom olhei seu código, vc pode melhor a marcação tá muito confusa.

Para sua dúvida, pode pegar o filho único:

#Vitrines li:hover div:only-child {
  background-color: #9E0B27
}

[ ]'s

[L. Henrique 179]

Antonio,

Como os dois elementos são irmãos de um mesmo elemento pai, você pode usar a condição ~ no CSS. Veja aqui uma documentação sobre Seletores (em inglês).

Veja, a classe ou elemento chamado deve sempre ser o pai, ou seja:

<a href="#" class="imagem">
   <img />
</a>
<a href="#" class="titulo">
   <div></div>
</a>

Sempre selecione os elementos <a> (anchor), já que um elemento filho deles não pode alterar o elemento filho de outro. Resumindo: O <a> pode alterar o outro <a>. O <img> NÃO pode alterar o <div>, somente via JavaScript/jQuery.

Veja aqui uma DEMO e tente aplica-la ao seu projeto.

Abraços!

[pwd 7]

Se vc for usar sua marcação para ambos:

        #Vitrines li:hover img:only-child {
            opacity: 1.0;
        }
        #Vitrines li:hover div:only-child {
            background-color: #9E0B27
        }

[ ]'s

[Antonio Netto 0]

Obrigado PWD e L. Henrique! Deu pra aumentar a minha noção... consegui resolver, mas ficou mais simples utilizando o código que o PWD postou por último, pois tenho várias páginas com essa alteração.

 

Forte abraço!! Vlw pela força amigos!!! ;)