How do I make hover trigger another hover in CSS?

HTML & CSS
1

How do I make hover trigger another hover in CSS? what is the example?

2

It depends exactly what you want so lets start with an example first and then you can say what you want to happen instead.

You can’t actually trigger a hover on something else but you can make something else change while you are hovering elsewhere (depending on structure). e.g. You hover a div and then you can style a child element while the parent is hovered or you could style an adjacent element but the effect on the adjacent element is lost as soon as you move the mouse away (unlike the child element which can stay active all the time the parent is hovered.
)

3

In CSS, you can make one hover trigger another hover using the “:hover” pseudo-class and the “:active” pseudo-class. Here’s an example of how you can do this:

HTML:

<div class="container">
  <div class="hover-1">Hover 1</div>
  <div class="hover-2">Hover 2</div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.hover-1:hover + .hover-2 {
  background-color: yellow;
}

.hover-2:active {
  background-color: red;
}

In this example, when you hover over the “Hover 1” element, the “Hover 2” element will have a yellow background. When you click on “Hover 2”, its background color will change to red.

Note that this method only works if the second hover element is a sibling of the first hover element, and if it is positioned immediately after the first element. The “+” selector is used to select the second element immediately following the first element.

4

No you can’t trigger the hover state on something else as I already explained above. :slight_smile:

You can style another element based on hovering a sibling as shown in my demo. Your demo is much the same but uses the adjacent selector which limits its scope to the next element only.

5

As Paul says, you can “fake” activating the hover state on siblings/descendants etc; you can (usually) do so bidirectionally also. But it’s worth pointing out that you’re not actually enabling the hover state on the other element, which may be an important distinction for Javascript etc.

1 Like
6

Hi @zuhaybtaha210, welcome to the forum.

Just to let you know, you can format your code using the </> button in the menu at the top of the text editor.

This will wrap the code in opening and closing ticks ``` your code here ```

I have done it for you this time :slight_smile:

1 Like