How to transform one element when hover on another element

Questions
1

Hi guys,

As the title says, I would like to transform one element when I hover on another.

To be specific, I am making a button. The button has an arrow. I want the arrow to animate when I hover the entire button div, not only when I hover the arrow image itself.

I also want the transform animation to animate in and out, both directions, not snapping back to the original position.

Here is a video where I show exactly what I am trying to do:

Button Arrow Transform Example

Can you explain how this is done in Divhunt?

-Alexander

2

Hey @nextlevelbros

In this case you can use a child selector with the combination of hover state. So what you would want is to select button, then switch to hover + use child selector “img” or “svg” (target arrow tag), and then adjust the css properties.

image
image542×742 59.8 KB

So what this does is following: on button hover target img (or svg).

1 Like
3

Got it, thanks a lot for explaining how that works.

1 Like