/    Sign up×
Community /Pin to ProfileBookmark

Changing underline color on mouseover

Copy linkTweet thisAlerts:
Jul 01.2003

I was checking out Toolband.com and noticed their links are way cool… when you mouse over them the text stays the same color gray, but the gray underline changes to red. ?

I assume this is a combination of using a bottom border in CSS with some sort of Javascript code on the link but it didn’t show up on the page source. I’m pretty good with CSS but very weak on my js. 😮

Anybody know how to do this? Thanks.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesJul 01.2003 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Example</title>

<style type="text/css">

<!--

a {display:block; float:left}

a:link, a:visited {border-bottom:solid 1px #aaa}

a?hover, a:active {border-bottom:solid 1px #f00}

-->

</style>

<div><a href="http://www.w3.org/TR/REC-CSS2/">CSS2 Specification</a></div>[/font]
Copy linkTweet thisAlerts:
@toicontienJul 02.2003 — After going to toolband.com, you probably want something more like the code below:

IN CSS
<i>
</i>.grey { color: #ccc; }

a:link {
/* insert styles for link here */
}
a:active {
/* insert styles for link here */
}
a:hover {
/* This is where you change the underline color for the link */
color: green;
}
a:visited {
/* insert styles for link here */
}


IN HTML
<i>
</i>&lt;a href=""&gt;&lt;span class="grey"&gt;Link text here&lt;/span&gt;&lt;/a&gt;
×

Success!

Help @Stellar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...