Sun, 2004-12-05 20:02
Hi,
How do you make :hover borders around links that are active beyond the actual link text? I've got a navbar with links within the site and if you hover the actual text you see the whole border light up but you have to be on the text, how do you make it so if you hover even off the text slightly in the navbar the link lights up?
I've done it by playing with the margin on that column and floating other stuff and absolute positioning other stuff but it creates a real problem for Firefox and Opera.
Would appreciate your help,
Rischen
Sun, 2004-12-05 20:28
#1
light-up link hovers
In a nutshell you need to set your anchor to display:block
then you should be able to set hover on the actual anchor area rather than just href link.
Hugo.
Sun, 2004-12-05 22:26
#2
light-up link hovers
Be aware, though, that if you do your <a> as blocks you will have to make them float or else they will stack vertically.
DE
Sun, 2004-12-05 23:45
#3
light-up link hovers
DCElliott wrote:
Which obviates the need to declare them block, {display: block;}, since a float is automagically a block element Be aware, though, that if you do your <a> as blocks you will have to make them float or else they will stack vertically.
[emphasis added]
DE
. cheers,
gary
Mon, 2004-12-06 01:44
#4
light-up link hovers
Hi,
Thanks all.
Thanks, Hugo. That worked brilliantly in Firefox and most everything else. (sigh) Is there any work around to make it work in that other browser?
Okay, I've got a left floated nav column, a right floated links column and a central content column. My nav column is the left floated column with light up links and for some reason IE doesn't recognize the width of that column as the anchor width for the :hovers in it. Finding a way to make it work initially in IE has caused me all my recent cross-browser problems. Is there a work around to make IE light up along the entire width of the navbar because it's gone back to just lighting up on link text over whereas Firefox and all are perfect now.
I really appreciate it,
Rischen
Mon, 2004-12-06 09:46
#5
light-up link hovers
Rischen,
Could you post some code to look at ?
Hugo.
Mon, 2004-12-06 14:47
#6
light-up link hovers
Hey Hugo,
Thanks a lot for the offer. I've got a bare-nekkid test on the thing cos I've gone back to basics on this.
In Mozilla the links do what they're supposed to but IE seems to have a problem with the fact that the navigation column is floated and doesn't recognize its width as the anchor container for the hovers. (As for the difference in top-margin placement between the two combatants, I ain't even thinking about that yet.)
Take a look. I really appreciate it.
Best,
Rischen
<style type="text/css">
body {
margin: 0;
}
#navigation {
float: left;
width: 10em;
margin-top: 1.5em;
}
#links {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
padding: 0 1em;
border: solid #cccccc;
border-width: 0 1px;
}
#footer {
clear: both;
}
a {
display: block;
color: olive;
text-decoration: none;
border: solid white 1px;
}
a:hover {
display: block;
background-color: #cccccc;
border: solid black 1px;
}
.pic {
position: relative;
left: 0;
top: 0;
height: 73;
width: 621;
}
</style>
<body>
<img class="pic" src="marquee.gif" />
<div id="navigation">
<h2>Navigation</h2>
<a href="lkajsdkf.com">Silver Dragon</a>
<a href="lakjsdf.com">Gold Dragon</a>
<a href="alkdjf.org">Bronze Dragon</a>
<a href="aldkfj.info">Tin Dragon</a>
</div>
<div id="links">
<h2>Links</h2>
<h3>Our friends</h3>
</div>
<div id="content">
<h1>Content</h1>
<p>Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon</p>
<p>Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon</p>
</div>
<div id="footer">
© The Silver Dragon 2004
</div>
</body>
Mon, 2004-12-06 15:22
#7
light-up link hovers
You probably don't want this effect on all links so you can modify your CSS a bit with Contextual Selectors:
#navigation {
...
}
#navigation a:link,
#navigation a:visited {
display: block;
color: olive;
text-decoration: none;
border: solid white 1px;
}
#navigation a:hover,
#navigation a:active {
background-color: #ccc;
border-color: #000;
}Basically, what the above code does is create a context for all <a ...> within <div id="navigation">. They will get your special style without affecting other <a ...>s. #navigation become the context for the style. A lot of folks don't realize this and do a lot of extra coding in both the CSS and HTML. More coding means more time, more mistakes, and harder maintainence. So, get smarter and lazier all at once.
Notice also that I stripped out the redundant property declaration in your :hover style and also covered off the other link states.
Check your pic style - you are missing units on your dimensions.
DE
Tue, 2004-12-07 14:47
#8
light-up link hovers
Hey DC,
I really appreciate your help and time on that. Thank you. It didn't work at first but then I added a width to the anchor and an * html hack and now IE accepts the width of the anchor and Mozilla which as someone once said is too well behaved for such fun accepts the original float width as the href anchor.
I appreciate your time, help and advice.
Best,
Rischen