CSS transition help!

So I’m on my own project using html and css after finishing those two courses on codecademy. But I found that i need to learn somewhat more about css transition beyond the content of css lessons because i got millions of question about it lol.
One of them I really want to get help is this.
How can I change color of

when I hover on the

content? I can make color of

to change when I hover on the

contents, but it’s hard to connect different tags.

Thank you and I’m sorry for my bad english…!

To answer your question →

How can I change color of when I hover on the content?

You can use for example →

Use the :hover selector

h1:hover {
  background-color: blue;
}

/* When you hover on your h1 element then it should be blue */

Here’s w3schools’s example → :hover selector

Here’s MDN’s example → :hover selector

1 Like

Ohh im sorry my question was how can I change color of A tag when I hover B. I used paragraph and h1 tag in the question but I didn’t know it is applied to content.

It’s alright @ye-wonl8998422915

To change the color of A tag when I hover B:

In HTML

<div id="a">Div A</div>
<div id="b">Div B</div>

In CSS

#a:hover + #b {
    background: #ccc
}

I guess this should get the job done.

2 Likes

It is working as what you expected? Feel free to mark it as solved.

1 Like

Omg it works you saved so much of my time thank you :))

1 Like


I’m so sorry for bothering you again. For your example, it works really well. But like my picture above it doesn’t work and i’m pretty sure that’s because there is a divs around each elements. How can I make it works with div?

You can select the class .containera & .containerb

For example ->.

.containera:hover {
   top: 10px;
}
.containera:hover + .containerb {
   top: 10px;
}