How to apply different effects at the same time?

Asked

Viewed 24 times

0

Eae personal, beauty?

I have two icons and each one of them has a different Transform effect, my doubt is:

When I hover over icon1, there is some way to trigger the icon2 effect at the same time?

my code is like this:

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

#icon2:hover{
    transform: translate(20px, 0px);
    transition: 2s;
}
css css-hover css-animations
  • 1

    It will depend on the structure of the HTML. It would be interesting to post on the question how are these icons.

2 answers

2

Basically you have to concatear the CSS rule, maybe using the adjacent selector + for when do Hover on one brother tb activate the other.

#icon1:hover + #icon2

inserir a descrição da imagem aqui

See the example below

#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

If you place the two icons on a parent element, you can use the :hover of the parent to activate both icons.

#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>

Browser other questions tagged css css-hover css-animations

You are not signed in. Login or sign up in order to post.