By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,240 Members | 1,404 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,240 IT Pros & Developers. It's quick & easy.

How to get the hyperlink underlined with MouseOver or getfocus

P: n/a
All,

I have seen the feature on many sites and would like to implement it for
myself as well, where if a mouse is moved over a hyperlink, it gets
underlined. For example, in my code, if the mouse is moved over "home" or
gets the focus, I would like it to be underlined.

<html>
<body>
<font face="Arial, Helvetica, sans-serif" size="1" color="#999999">
<a href="http://www.cnn.com"> home
</body>
</html>
Any help would be greatly appreciated.

Best Regards,

Addi
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
addi wrote:
I have seen the feature on many sites and would like to implement it for
myself as well, where if a mouse is moved over a hyperlink, it gets
underlined. For example, in my code, if the mouse is moved over "home" or
gets the focus, I would like it to be underlined. <font face="Arial, Helvetica, sans-serif" size="1" color="#999999">
<a href="http://www.cnn.com"> home


Take a basic course in CSS <http://dorward.me.uk/www/css/#tutorials>, and
pay especial attention to the parts about pseudoclasses like :hover.

Also, take note that the underline is a _big_ clue that some text is a link,
removing it isn't a good idea in most circumstances. The user _might_ be
able to work it out from the colour, but a significant proportion of the
population suffers from colour blindness, and some people do use greyscale
monitors still.

--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #2

P: n/a
Somewhere around 12/27/03 8:57 AM, addi typed wildly with reckless abandon:
All,

I have seen the feature on many sites and would like to implement it for
myself as well, where if a mouse is moved over a hyperlink, it gets
underlined. For example, in my code, if the mouse is moved over "home" or
gets the focus, I would like it to be underlined.

<html>
<body>
<font face="Arial, Helvetica, sans-serif" size="1" color="#999999">
<a href="http://www.cnn.com"> home
</body>
</html>
Any help would be greatly appreciated.

Best Regards,

Addi

First of all you want to close the tag </a>

Then you want to use your stylesheet to make every link the same without
adding tons of extra code before each one. And make sure that the link
text is distinguishable from the body text. Also, if the link size is
the same as the rest of the text there's no need to specify size or family.

a {
text-decoration: none;
font-family: sans-serif;
font-size: 100%;
color: #999999;
}

a:hover {
text-decoration: underline;
font-family: sans-serif;
font-size: 100%;
color: #999999;
}

Hope this helps, Aron

--
The last time I was inside a woman was when I went to the Statue of Liberty.
Jul 20 '05 #3

P: n/a
In article <jS*******************@news01.roc.ny> in
comp.infosystems.www.authoring.html, addi wrote:
I have seen the feature on many sites and would like to implement it for
myself as well, where if a mouse is moved over a hyperlink, it gets
underlined.


Popularity is not the same thing as quality. The design you cite
above is an example.

Think about it from a user's point of view: She must move her mouse
over EVERY DAMN WORD on the page, hoping to find a link. That' _if_
she even suspects there are links there to be found.

More likely, she'll shake her head in frustration, click the Back
button, and go to the next site in her list of search results.

You want to make links easy to find, not hard to find.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.