469,609 Members | 1,455 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,609 developers. It's quick & easy.

Underlining text, changing colors

How can I change the text in a link, originally displayed with the
"text-decoration:none" attribute to display an underline during the
onMouseOver event, and back to its original (non-underlined) state for
the onMouseOut? I'm pretty sure that it's of the format

document.<itemname>.attribute = value

but beyond that I'm not sure, and I can't find enough of a reference to
let me proceed. I'd also like, as an alternative, to be able to change
the font color instead of (or in addition to) just changing to underlining.

I'd appreciate it very much if anyone can provide a bit of code, or can
point me to some on-line reference that shows this. Thanks!
Henry
Jul 23 '05 #1
6 2218
Henry wrote:
How can I change the text in a link, originally displayed with the
"text-decoration:none" attribute to display an underline during the
onMouseOver event, and back to its original (non-underlined) state for
the onMouseOut?


<style type="text/css">
a:hover {
text-decoration: underline;
}
</style>

Mick
Jul 23 '05 #2

Thanks, Mick, for the speedy reply. I haven't used CSS before (I've had
some minor exposure to them, and I know that I should be using them...)
so I have a couple of questions.

First, does it matter where this snippet is placed on the HTML page? I
tried it in several locations (just inside the BODY and HTML tags, as
well as inside a <Table></TABLE>, but no soap.

Does it matter that the page where I'm trying to implement this is part
of a frameset? I have a links page (the left-most frame) where I want
this to be in effect.

Second- does the page's extension matter? Not only is this page part of
a frameset, it is also a JSP page. (Aha, the truth comes out!) Could
this be a factor, as well?

Certainly these effects are not crucial, but they are, I believe, pretty
understated and can give the page a more polished look. I'd like to get
this working, and appreciate your help.
Henry

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #3
Mick White wrote:
a:hover {
text-decoration: underline;
}


But be warned, modern browsers will also display this effect for <a>s
with only a "name" or "id" attribute.

Jul 23 '05 #4
Henry Hayden wrote:
Thanks, Mick, for the speedy reply. I haven't used CSS before (I've had
some minor exposure to them, and I know that I should be using them...)
so I have a couple of questions.

First, does it matter where this snippet is placed on the HTML page? I
tried it in several locations (just inside the BODY and HTML tags, as
well as inside a <Table></TABLE>, but no soap.
Inside <head> tags is preferred.
Does it matter that the page where I'm trying to implement this is part
of a frameset? I have a links page (the left-most frame) where I want
this to be in effect.

Second- does the page's extension matter? Not only is this page part of
a frameset, it is also a JSP page. (Aha, the truth comes out!) Could
this be a factor, as well? This should not matter
Certainly these effects are not crucial, but they are, I believe, pretty
understated and can give the page a more polished look. I'd like to get
this working, and appreciate your help.
Take a look:
http://www.mickweb.com/demo/hover.html

Mick

Henry

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Jul 23 '05 #5
Thanks again!

I found, with the help of your last hint, what the problem was. In each
link, I had the following:

style: text-decoration: none

So... it was always going to be just that... none.
However, using the following:

<style type="text/css">
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

works just fine. Thanks again!

Henry
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #6
Keith Bowes wrote:
Mick White wrote:
a:hover {
text-decoration: underline;
}


But be warned, modern browsers will also display this effect for <a>s
with only a "name" or "id" attribute.


Which is why you want to use

a:link:hover, a:visited:hover {
...
}

and the like. F'up2 comp.infosystems.www.authoring.stylesheets.
PointedEars
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by GujuBoy | last post: by
4 posts views Thread by Nick Calladine | last post: by
1 post views Thread by jhickers | last post: by
reply views Thread by mihir.kotwal | last post: by
3 posts views Thread by Manil | last post: by
reply views Thread by Solution2021 | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.