Roll over CSS text links - how do they do that?

  Griffon 22:44 03 Mar 07
Locked

Any of you CSS gurus understand roll over links?

I want to use text links in a navigation bar which only appear underlined on mouse over.

I use CSS in Dream Weaver to define all my different types of text (page texts, nav links etc.)

...but I only want to apply different properties to my navigation bar links.

I don't want to use images instead of text which would be one way to do it.

I've messed around with a hover which works but sets the mouse-over for all text on the page. I only want it to affect specific css text that I choose to apply it to.

I'm also aware that you can set up link behaviours in the page properties dialog box. Including a "show underline only on rollover" option. However, setting the links properties seems to take priority over all link text previously defined with CSS.

This must be possible because you see it all over place.

  PurplePenny 00:21 04 Mar 07

It is possible but I'm afraid I don't know how you would do it using DreamWeaver. You will need to assign a class to the nav bar links and then define the CSS just for that class.

  Griffon 07:29 04 Mar 07

OK, PurplePenny. I can hand code the code in the CSS files within DW if you'd care to tell me what I need to do. :-)

  adamcoppard 09:41 04 Mar 07

Ok, first eitherhave your text links as a ul with each link as an li (main bar) or just keep them as a.

if you put them in a ul then this would be the styling

#ul li a.link{
font: what you want;
text-decoration: none;
#ul li a.hover{
text-decoration: underline;
}

or for a

a.link{
font: what you want;
text-decoration: none;
}

a.hover{
text-decoration: underline;
}

  Eric10 11:03 04 Mar 07

Slight correction to adamcoppard's post:

instead of a.link and a.hover
you should use a:link and a:hover

This will of course affect all links on your page so if you want to restrict this effect to the Navbar links then you could implement PurplePenny's suggestion with code similar to the following:

a.navbar:link {
font: what you want;
text-decoration: none;
}

a.navbar:hover {
text-decoration: underline;
}

then call it in your code like this: <a class="navbar" href="your_page.html">Link1</a>

  Eric10 18:12 04 Mar 07

I've just been looking at this again and since the links are for a Navigation Bar you may not want them to change after they have been visited. If this is the case then use:

a.navbar instead of a.navbar:link

the links will then revert back to their original format after they have been clicked.

  Griffon 20:25 04 Mar 07

Thanks for all this info! I haven't tried it yet but since it might take me a while to fiddle with I thought I'd thank you first in case you thought I wasn't grateful for the help. Cheers.

  Griffon 21:19 04 Mar 07

Hey! It works! Thanks, Eric10 - that does exactly what I want. You know, I'd have never have worked that out from all the tutorials I've looked at on the Dreamweaver and other sites which claim to do just this. In fact I didn't even have to do any hand coding. I just used the DW css dialogue boxes.

The coding is slightly different from yours but it works.

<a href="../index.htm" class="navbar">Home</a>

Is there anything special about the a.navbar ? I assume I could have used a.fred and a.fred:hover . Or does navbar have a special role?

Just for completeness I'm adding my css coding too just in case anyone else might find it useful.

a.navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFDD0;
text-decoration: none;
}
a.navbar:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFDD0;
text-decoration: underline;
}

  PurplePenny 22:26 04 Mar 07

You can call the class anything you want but "navbar" seems to be the de facto standard these days.

Using a name that makes sense helps you to remember what it refers to in two years time when you want to change your CSS and it also makes sense to anyone else who might have to take over the site from you.

  Eric10 23:08 04 Mar 07

Just one further point to bear in mind for the future. Although there is nothing wrong with the working of your css code much of it is actually unecessary because a.navbar:hover will inherit the properties of a.navbar. The following code will work just as well:

a.navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFDD0;
text-decoration: none;
}
a.navbar:hover {
text-decoration: underline;
}

Since it is only the text-decoration that changes when hovered then that is the only part that needs to be have its property rewritten so long as a.navbar:hover is defined after a.navbar in your css.

  barryoneoff.co.uk 00:10 05 Mar 07

but doesn't all this get over ridden by the settings in an individuals browser options? For instance, if in Internet Options I check the box to always underline links, won't they always show as underlined in my browser?

This thread is now locked and can not be replied to.

Surface Pro (2017) vs Surface Pro 4

20 groundbreaking 3D animation techniques

How to mine Bitcoin on Mac