Alteração de primeira criança css no principal foco
-
26-12-2019 - |
Pergunta
O violino da amostra está aqui:http://jsfiddle.net/3cYtX/12/
Eu tenho um elemento que representa uma imagem (por exemplo, a imagem de vídeo da tela) e um elemento filho, representando uma outra imagem (dizer 90x60, o ícone "reproduzir").
<div class="big">
<img class="small">
</div>
A pequena imagem é centrada na horizontal e na vertical.
Eu quero quando eu sobre o grande imagem pequeno uma alteração de sua opacidade.
O código abaixo funciona apenas quando eu passe o pequeno imagem.
.small {
opacity: 0.5;
}
.small:hover {
opacity: 0.9;
}
Existe uma maneira de corrigir o que muda passe o grande imagem) apenas via CSS?
Solução
Você pode fazer isso :
.big:hover .small{
// do stuff
}
Verifique isso violino
Nota:Eu estou usando div
em vez de img
elemento aqui.
Outras dicas
.big {
width:200px;
height:150px;
background-color: green;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.small {
opacity: 0.9;
background: red;
width:90px;
height:60px;
}
.big:hover > .small {
opacity: 0.5;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow