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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Link hover underline

Status
Not open for further replies.
dexeloper

dexeloper

Programmer
Oct 26, 2004
162
GB
Can anyone see why this code doesn't give hover underline:

<html>
<head>
<style type="text/css">
#navbar{width:100%;height:30px;color:white;padding-top:5px;background:#888888;}
#navbar a.nav{text-decoration:none;font-size:12pt;margin-left:20px;cursor:pointer;cursor:hand;}
#navbar a.nav:visited{text-decoration:none;}
#navbar a.nav:active{text-decoration:underline;}
#navbar a.nav:hover{text-decoration:underline;}
</style>
<body>
<br/><br/>
<div id="navbar">
<a class="nav">Aaaaa</a><a class="nav">Bbbbbb</a><a class="nav">Ccccccc</a>
</div>
</body>
</html>
 
Sort by date Sort by votes
Hi

It works for me in Mozilla ( FireFox, Seamonkey, Epiphany, Galeon ), Opera, Midori and Konqueror.

The only minor problem is that the definition for [tt]:hover[/tt] used to be before [tt]:active[/tt]. But not a problem in this case.

Feherke.
 
Upvote 0 Downvote
I'm in IE6. Tried putting 'hover' before 'active' but still no joy. Thanks for the response.
 
Upvote 0 Downvote
Hi

I suppose all [tt]a[/tt] elements inside that navbar [tt]div[/tt] will be the same. In that case I would try :
CSS: 
[purple]#navbar[/purple] [teal]{[/teal] [blue]width:[/blue][green]100%[/green]; [blue]height:[/blue][green]30px[/green]; [blue]color:[/blue][green]white[/green]; [blue]padding-top:[/blue][green]5px[/green]; [blue]background:[/blue][green][i]#888888[/i][/green]; [teal]}[/teal]
[purple]#navbar[/purple] a [teal]{[/teal] [blue]text-decoration:[/blue][green]none[/green]; [blue]font-size:[/blue][green]12pt[/green]; [blue]margin-left:[/blue][green]20px[/green]; [blue]cursor:[/blue][green]pointer[/green]; [blue]cursor:[/blue][green]hand[/green]; [teal]}[/teal]
[purple]#navbar[/purple] a[teal]:[/teal]visited [teal]{[/teal] [blue]text-decoration:[/blue][green]none[/green]; [teal]}[/teal]
[purple]#navbar[/purple] a[teal]:[/teal]active [teal]{[/teal] [blue]text-decoration:[/blue][green]underline[/green]; [teal]}[/teal]
[purple]#navbar[/purple] a[teal]:[/teal]hover [teal]{[/teal] [blue]text-decoration:[/blue][green]underline[/green]; [teal]}[/teal]
HTML: 
[b]<a>[/b]Aaaaa[b]</a><a>[/b]Bbbbbb[b]</a><a>[/b]Ccccccc[b]</a>[/b]
Or try to add [tt]href="#"[/tt] to those [tt]a[/tt] tags.


Feherke.
 
Upvote 0 Downvote
Finally got it working. Needs 'href', and 'hover' twice.
Thanks for the input.
 
Upvote 0 Downvote
I seem to remember that in some versions of IE, you need to include a rule for plain [tt]a:hover[/tt] (without any classes or parent elements) for any kind of a:hover stylings to work.

It's as if having such a rule switches on the bit of the browser that checks for link hovers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
This is what 'hover' twice means:

#navbar{width:100%;height:30px;color:white;padding-top:5px;background:#888888;}
#navbar a.nav{color:white;text-decoration:none;font-size:10pt;margin-left:20px;cursor:pointer;cursor:hand;}
#navbar a.nav:hover{color:white;text-decoration:underline;}
#navbar a.nav:visited{color:white;text-decoration:none;}
#navbar a.nav:active{color:white;text-decoration:underline;}
#navbar a.nav:hover{color:white;text-decoration:underline;}
 
Upvote 0 Downvote
dexeloper, nope, that's what 'wrong' means.

IE6 definitely needed the href tag, else it did not apply the hover. IE6 distinguished between anchors (element you put on your page as a placemark for scrolling) and links.

You only need one hover, put after :focus and before :active. Remember to always use the following order: :link, :visited, :focus, :hover, :active. You can omit any of them if they do not change the state of the link, but the remaining must still be in correct order.

Other than that, I would suggest you work with feherke's cleaner code.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Well Vragabound your suggestion worked.

Guess that's what 'right' means.

Drinks on me at six.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
634
3esolar
3
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
232
waubain
waubain
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
214
jjgupta915
jjgupta915
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
193
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
link or button for going back to previous page - but to the link originally clicked
Replies
5
Views
452
audiopro
audiopro

Part and Inventory Search

Sponsor

Back
Top