Login  Register

CSS: how to underline links only whilst hovering (not all the time)?

classic Classic list List threaded Threaded
3 messages Options Options
Embed post
Permalink
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

CSS: how to underline links only whilst hovering (not all the time)?

Graham Perrin
I'd like to have links underlined only whilst the user hovers over them.

I see <http://n2.nabble.com/help/Answer.jtp?id=39>, <http://n2.nabble.com/site17.css> and <http://n2.nabble.com/Drop-down-css-tt2199646.html#a2201471>.

I experimented,

.wide-table a:link,
.narrow-table a:link,
.child-table a:link
{
    background: url('/images/icon_next.png') no-repeat;
    padding-left: 15px;
} 
td.avatarA a:link,
td.avatarB a:link,
a.category-subject:link {
    background: none;
    padding-left:0;
}
.nabble,
.nabble table,
.nabble .info-message th {
	text-decoration:none;
}
.post-hover {
    text-decoration:underline;
}

Clearly, I don't know CSS!

TIA for any advice.

(The blue arrow aspect is borrowed from <http://n2.nabble.com/-tp2157609p2256354.html>, thanks to Nabble. I wish to suppress the underline so that the blue arrows can draw greater attention.)
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: CSS: how to underline links only whilst hovering (not all the time)?

Hugo <Nabble>
Try this:
.nabble a:link, .nabble a:visited {
text-decoration:none;
}
.nabble a:hover {
text-decoration:underline;
}
Regards,
Hugo Teixeira
Nabble.com
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

CSS: blue arrows, plus links underlined only whilst hovering (not all the time)

Graham Perrin
Thanks. In combination with the blue arrows:

.nabble a:link, .nabble a:visited {
text-decoration:none;
}
.nabble a:hover {
text-decoration:underline;
}
.wide-table a:link,
.narrow-table a:link,
.child-table a:link
{
    background: url('/images/icon_next.png') no-repeat;
    padding-left: 15px;
} 
td.avatarA a:link,
td.avatarB a:link,
a.category-subject:link {
    background: none;
    padding-left:0;
}

I'll move this topic to the Resolved area.

(I don't expect anyone other than me to use that sub-forum, just tidying up after myself :)

For reference, PNG screen shots of
<http://n2.nabble.com/Chandler-Project%3A-selected-lists-f1653096.html> and
<http://n2.nabble.com/OpenOffice.org-projects%3A-selected-lists-f1803106.html>:





Following on from this: maybe one other CSS question, if I can't answer it myself it'll be a separate topic.

Cheers
Graham