Contexto
Tenho o seguinte código
<div id="id1"></div>
<div id="id2"></div>
Como poderia fazer com que ao passar o mouse em #div1
e #div2
, apenas a #div1
fique com o funde verde?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeAqui tem um workaround com CSS. O pulo do gato é o column-reverse
aliado ao seletor irmão ~
, no código abaixo segue o exemplo
.container {
display:flex;
flex-direction: column-reverse;
}
#id1:hover {
background: green;
}
[id^="id"] {
border: 1px solid black;
}
[id^="id"]:hover ~ #id1 {
background: green;
}
<div class="container">
<div id="id3">3</div>
<div id="id2">2</div>
<div id="id1">1</div>
</div>
Alternativamente às respostas já apresentadas, pode optar por selecionar apenas o primeiro elemento filho ao passar por cima do seu pai. Algo como:
.container:hover div:first-child {
background-color: green;
}
<div class="container">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
$('div.mudar_cor').hover(function(){
$('div.vermelho').css('color','red');
}, function() {
$('div.vermelho').css('color','black');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mudar_cor vermelho'>Olá, sou a div vermelha.</div>
<br/><br/><br/>
<div class='mudar_cor'>Olá, sou a div verde.</div>
Adicione um seletor a div que deve ficar verde quando houver ação do mouse sobre ela.
<div class='mudar_cor vermelho'>Olá, sou a div vermelha.</div>
<div class='mudar_cor'>Olá, sou a div verde.</div>
Adicione no seu JS as seguintes regras:
$('div.mudar_cor').hover(function(){
$('div.vermelho').css('color','red');
}, function() {
$('div.vermelho').css('color','black');
});
Utilize o javascript para fazer isso, se o evento hover ocorrer sobre a div com a classe mudar_cor então altere a div com o seletor de classe definido como vermelho, se houver a saída do mouse de cima de uma dessas duas divs apenas retorne para a cor normal. Repare que passei duas funções para o evento houver, a primeira para alterar a cor caso haja interação do usuário com o mouse e a segunda seria o mouse leave, para retornar ao default, sem interação do usuário.