Style Hover Color

A

Andrea

I'm wondering if anyone would be able to tell me how to set a hover hyperlink
font color using Style. This is intended for top border menu buttons. I've
figured out how to remove the underline (see below), but not how to have the
font color change from black to blue. Any help with this would be
appreciated. Thank you.

<font face="Arial" color="#000000" size="1"><b><a href="contact_us.htm"
style="text-decoration: none; color: #000000">Contact Us</a></b></font></td>
 
M

Murray

The best way is to use CSS in an embedded or linked stylesheet, not as an
inline style as you show below.

By doing it inline, if you want to make a single change to a color or a
style then you have to change each instance. By doing it as above, you
would only need to change it once.

Try putting this in the head (between <head> and </head>) of the page -

<style type="text/css">
<!--
a:hover { text-decoration:none; color:#000; }
-->
</style>

This will affect EVERY link on the page. If you want to restrict it to a
single link or a single group of links, then you need to take other steps.
Might that be the case?
 
A

Andrea

Thanks for the reply, but I was using the inline style because I want to
restrict this to button text in the top shared border. I would like other
hyperlinks on the page to behave "normally." Thanks again.
 
S

Stefan B Rusynko

Just assign a pseudo class to the links in your shared border and you can use an external css file
Create a style in the css file

a.white {color: white; text-decoration: none}
a.white:link {color: white; text-decoration: none}
a.white:visited {color: white; text-decoration: none}
a.white:hover {color: white; text-decoration: underline}
a.white:active {color: white; text-decoration: none}

And apply the class to the links
<a href="yourlink.htm" class="white">





| Thanks for the reply, but I was using the inline style because I want to
| restrict this to button text in the top shared border. I would like other
| hyperlinks on the page to behave "normally." Thanks again.
|
| "Murray" wrote:
|
| > The best way is to use CSS in an embedded or linked stylesheet, not as an
| > inline style as you show below.
| >
| > By doing it inline, if you want to make a single change to a color or a
| > style then you have to change each instance. By doing it as above, you
| > would only need to change it once.
| >
| > Try putting this in the head (between <head> and </head>) of the page -
| >
| > <style type="text/css">
| > <!--
| > a:hover { text-decoration:none; color:#000; }
| > -->
| > </style>
| >
| > This will affect EVERY link on the page. If you want to restrict it to a
| > single link or a single group of links, then you need to take other steps.
| > Might that be the case?
| >
| > --
| > Murray
| >
| > | > > I'm wondering if anyone would be able to tell me how to set a hover
| > > hyperlink
| > > font color using Style. This is intended for top border menu buttons.
| > > I've
| > > figured out how to remove the underline (see below), but not how to have
| > > the
| > > font color change from black to blue. Any help with this would be
| > > appreciated. Thank you.
| > >
| > > <font face="Arial" color="#000000" size="1"><b><a href="contact_us.htm"
| > > style="text-decoration: none; color: #000000">Contact
| > > Us</a></b></font></td>
| >
| >
| >
 
M

Murray

A much more efficient approach would be to do it this way -

.sidebar a {color: white; text-decoration: none}
.sidebar a:hover {color: white; text-decoration: underline}

Note that I have changed the selector to something that describes the
function rather than the presentation. This makes it much easier to
maintain long after you've forgotten where you used ".white". Note also
that I condensed all but the hover pseudo-class into a single redefinition
of the <a> tag, which will hit all of the pseudo-classes, except as
overridden by the following (hence more specific) a:hover style. Finally,
note that I have styled the CONTAINER rather than the individual <a> tags.

This latter change would allow me to use the following HTML -

<div class="sidebar"><a href="foo.html">FOO</a> | <a
href="bar.html">BAR</a></div>

rather than this -

<a href="foo.html" class="white">FOO</a> | <a href="bar.html"
class="white">BAR</a>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top