Menu
I want to change the link-style for some of my links, like this:
a:hover
{
/* These links will be blue when hovered-over */
background-color: #3366FF;
}
However, I only want this to take effect in my Navigation Bar, and not for regular links.
I have tried variations on this:
#navbar a:hover
{
/* These links will be blue when hovered-over */
background-color: #3366FF;
}
With the intended meaning "this only applies to links with <div id="navbar">"
But it didn't work.
How can I set the style for only certain links, defined by the class or id of their container?
744
You've probably noticed links changing color when you place your cursor on them, a stylish effect and one that's very easy to implement using CSS. To change the color of your link on hover, use the :hover pseudo property on the link's class and give it a different color.
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
To do this, position your cursor on the page where you would like the link to appear, and then go to Insert > Link. In the window that appears, enter the text you would like to appear as a link, and in the URL Field, enter #targetname, where targetname is the name of your target.
That looks ok to me, Robusto has a valid point with the colour used.
Another method is giving the links a class of their own, eg:
CSS
a.navlink:visited
a.navlink:hover
{
background-color: #3366FF;
}
HTML
<a href="index.html" class="navlink">Home</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
