0

Eae pessoal, beleza?

tenho dois ícones e cada um deles tem um efeito transform diferente, a minha duvida é:

Quando eu passar o mouse sobre o icon1, existe alguma maneira de ser acionado o efeito do icon2 ao mesmo tempo?

meu código esta assim:

#icon1:hover{
    transform: rotate(360deg);
    transition: 2s;
}

#icon2:hover{
    transform: translate(20px, 0px);
    transition: 2s;
}
1
  • 1
    Vai depender da estrutura do HTML. Seria interessante postar na pergunta como estão esses ícones.
    – Sam
    Commented 2/09/2021 às 16:45

2 Respostas 2

2

Basicamente vc tem que concatear a regra CSS, talvez usando o seletor adjacente + para quando fizer o hover em um irmão tb ativar o outro.

#icon1:hover + #icon2

inserir a descrição da imagem aqui

Veja o exemplo abaixo

#icon1:hover{
    transform: rotate(360deg);
    transition: 2s;
}

#icon1:hover + #icon2{
    transform: translate(20px, 0px);
    transition: 2s;
}

#icon2:hover{
    transform: translate(20px, 0px);
    transition: 2s;
}

#icon1, 
#icon2 {
  background: black;
  width: 50px;
  height: 50px;
}
<div id="icon1"></div>
<div id="icon2"></div>

1

Se você colocar os dois ícones em um elemento pai, você pode usar o :hover do pai para ativar ambos os ícones.

#icone-1, #icone-2{
    width: 24px;
    height: 24px;
    background-color: yellow;
    border: solid 1px lime;
}

#pai:hover #icone-1{
  background-color: red;
}
 
#pai:hover #icone-2{
  background-color: blue;
} 

#pai{
  width: 24px;
}

#icone-1:hover, #icone-2:hover{
   border: solid 2px lime
}
<div id="pai">
  <div id="icone-1">1</div>
  <div id="icone-2">2</div>
</div>

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 .