Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing underline color on hover 2

Status
Not open for further replies.
JennyW

JennyW

Technical User
Joined
Mar 1, 2001
Messages
323
Location
CA
Hi.

I saw a link where only the underline changes color when hovered over.
I’d like to learn how to do this. Does anyone know how?

Here’s the page I found it at. If you search for Complete camp schedule on this page you’ll see what I’m talking about



Here’s the code I found... I don’t think it’s useful though:

<a href=&quot; class=verb10>Complete camp schedule</FONT></a>


Thanks guys.
Jenny
 
Sort by date Sort by votes
I DIDN'T see the link that did that, but I DID see the source code. verb10 doesn't say anything about changing the underline color. There is no css thing for underline color either(as far as I know).

Rick If I have helped you just click the first link below to let me know :-)
 
Upvote 0 Downvote
I think I hovered over every link there - I didn't see this happening. What browser are you using?
 
Upvote 0 Downvote
hey, that's really cool! [thumbsup2] I didn't know you could do that...

Anyways, I picked around in their code, and here's how it works:

Use this setup for your link in the HTML:
Code: 
      <a href=&quot;where.ever&quot;><x>My link</x></a>
where <x> is any inline element. That means, anything that doesn't create it's own block box, such as <font> or <span> or <i>, etc. You can even make up your own element (like x), as long as you set it's &quot;display&quot; property to &quot;inline&quot; using CSS. Make sure the <x> element is INSIDE the <a> wrappers

Then, set your colours that you want for the underline using CSS selectors like:
Code: 
      A:link { color:#0000FF }
and
Code: 
  A:hover { color:#FF0000 }
.

Lastly, use your element <x> to set yet another font colour, like this:
Code: 
      x { color:#000000 }

The example code that I've given you should result in black text with a blue underline that turns red when the cursor is over top of it!

I should also mention that you can use the &quot;class&quot; property on the innermost tags around your link to do the same thing. Ie.:
Code: 
HTML:   <a href=&quot;any.where&quot;><font class=&quot;black&quot;>link</font></a>
CSS:    .black { color:#000000 }

----------------------- &quot;Insofar as the propositions of mathematics refer to reality they are not certain, and insofar as they are certain they do not refer to reality.&quot; -- Albert Einstein
 
Upvote 0 Downvote
That's pretty cool. I like stars, but I think this time I'll give one away;-)

Rick If I have helped you just click the first link below to let me know :-)
 
Upvote 0 Downvote
Hi,

:-) I answered a similar question last week here on this forum and nobody noticed.

first:
Bluemango, I like your idea, but only one remark:
Don't forget to set the visited color to the same color as the link if you want the underline always blue. (otherwise the underline will be black after you once clicked the link)
A:visited { color:#0000FF }

second:
For those who are interested, here is my example.
a)See that in link 3 both, the text color and underline color, change
b)notice that the &quot;color:orange&quot; in the class &quot;navi&quot; has no effet !! so you can simple leave it.

<HTML>
<HEAD>
<TITLE></TITLE>

<style>
.normal { COLOR:#C3C0EF; }

a.navi:link {text-decoration: none; font-weight: bold; color:orange}
a.navi:visited {text-decoration: none; font-weight: bold; color: orange}
a.navi:hover {color:red; text-decoration:underline;}

a.navi2:link {text-none: underline; font-weight: bold; color:blue}
a.navi2:visited {text-decoration: underline; font-weight: bold; color:blue}}
a.navi2:hover {color:red; text-decoration:underline;}

</style>
</HEAD>
<BODY>

<a class=&quot;navi&quot; href=&quot;date.asp&quot;><font class=&quot;normal&quot;>link 1 to datepage</font></a>
<br>
<a class=&quot;navi&quot; href=&quot;date.asp&quot;><font class=&quot;normal&quot; onmouseover=&quot;changeColors(this);&quot; onmouseout=&quot;changeBack(this);&quot;>link 2 to datepage</font></a>
<br>
<a class=&quot;navi2&quot; href=&quot;date.asp&quot;><font class=&quot;normal&quot; onmouseover=&quot;changeColors(this);&quot; onmouseout=&quot;changeBack(this);&quot;>link 3 to datepage</font></a>

<script language=&quot;javascript&quot;>
function changeColors(that)
{
that.style.color = 'blue'
}

function changeBack(that)
{
that.style.color = ''
}
</script>

</BODY>
</HTML>

Hope this helps someone,
Erik


<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
here is the question/answer of last week:

thread215-301168

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
531
lmcate
lmcate
waubain
  • Locked
  • Question Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
421
waubain
waubain
waubain
  • Locked
  • Question Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image.
Replies
5
Views
659
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top