Is there a way to style a html element on a link hover?

Question

I want to ask if there is a way in CSS to style an element on a link hover. What I mean is that for example on a link hover change the body background color to blue.

I tried to search but I didn't find anything.

Here is an example https://codepen.io/mishra93mohit/pen/QZRMbw — Ozgur Sar, Nov 30 '20 at 18:34
Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Saajan, Nov 30 '20 at 18:39

score 1 · Answer 1 · answered Nov 30 '20 at 18:37

1

Yes it is possible to use "hover".

For example :

a: hover {
background-color:blue;
text-decoration: none;
}

However, I think it's best to share your code so that you can help you.

answered Nov 30 '20 at 18:37

Pouchon

31
3

Redemption Okoro · Answer 2 · 2020-11-30T18:51:59.917

You can do so if the link elements preceeds or is the parent of the element whose background you want to change

UPDATE

If your html structure looks like this

<a class="my_link" href="example.html">My link</a>
<div class="my_element"></div>

In the above code, the a tag with class my_link proceeds the element which we want to change its background. In this type of scenario, you can use the CSS code below. Notice the ~ symbol...

Then in CSS

.my_link:hover ~ .my_element{
    background: red;
}

If your html structure looks like what i have below, where the a tag is the parent of the element whose background we want to change.

<a class="my_link" href="example.html">My link
     <div class="my_element"></div>
</a>

The CSS code below would do the trick. Notice the ~ symbol is omitted

.my_link:hover .my_element{
    background: red;
}

Is there a way to style a html element on a link hover?

2 Answers2