Html web design css trouble

Hey there, Kanav.

I'm still learning myself...so I'm not going to write the code out for you (why steer you in a wrong direction?), but what you are describing is almost certainly a transition effect, which I think you will be able to discover for yourself in this library offering: CSS: Beyond the Basics

Best of luck.

Hi Kanav, Check out the CSS :hover selector

Happy coding! Brenna

Hello Kanav,

This is a simple hover effect you're talking about which can easily be done using CSS. You first set the color of the font you're working with (if you don't set it, it will just be black). Then you set a hover state on that same element and put a different font color. This can also be used to change just about anything on an element. An example would look like this:

section {
    color: blue; /* This sets the font color to blue */
}

section:hover {
    color: red; /* This changes the font color to red, while hovering over the entire section */
}

You can check out the links from the previous 2 posters and experiment to get a more in-depth knowledge of the hover state.

Hi Kanav,

If you have 3 sections with an HTML structure like:

<div id="portfolio" class="section">Portfolio</div>
<div id="about" class="section">About</div>
<div id="contact" class="section">Contact</div>

And you would like the text color to be different for each section you hover on, you would apply style like this:

.section {
  color: white;
}
#portfolio:hover {
  color: red;
}
#about:hover {
  color: green;
}
#contact:hover {
  color: blue;
}

I hope this answers your question!