Fri, 2004-08-06 11:07
Hi, thanks for taking the trouble to read - a newbie question here:
I have a hyperlink on the left side of a one-line description of that link. I want to change the text color of the description next to the link when the user rolls the mouse over the link only. (i.e. not mous-ing over the description)
so as a visual example:
a link to Yahoo. {some ordinary character spaces go here} < This is a description of the link
I want the "...description of the link" part to say, go from a light grey to a dark gray when the user mouses-over the link.
I have sucessfully defined hover styles for the link itself, but have no clue about how to extend this to the text close by on the same line.
The closest pre-existing style I've been able to find is discussed on this page: http://www.meyerweb.com/eric/css/edge/popups/demo.html
but seems a bit overkill for my purposes (and I'm not really sure how to scale it back)
I'm guessing it has a simple solution, but my own CSS toolbox is rather thread-bare... :roll:
Any help appreciated! 
Fri, 2004-08-06 14:08
#1
changing text NEXT TO a hyperlink on rollover
That's gonna be tricky without making the description text a link as well. Eric's example works because the extra text, while it is a link, only appears when the original link is mouseovered (that's not a word, I know) so you'd never get the chance to click it.
I think the only way to do what you want to do is with javascript; so you give the link description an ID, and change the font color of the SPAN with that ID when you mouseover the link. (Unfortunately I don't know exactly how to do this, otherwise I'd tell you! I know it's straightforward and I think it's about time I learnt actually 
)
Hope that helps a bit.
Fri, 2004-08-06 16:42
#2
changing text NEXT TO a hyperlink on rollover
You don't have to use Javascript:
link here link desc here
And have a hidden span.
When you mouseover the link, the span will show up over the existing link desc, in theory making it look like the text has changed colour.
(You'll need to play around with the positioning.)
Fri, 2004-08-06 19:32
#3
changing text NEXT TO a hyperlink on rollover
Like the pineapple said...
Something along these lines is very simple.
<html>
<head>
<style type="text/css">
a:link, a:visited {
color:#555;
}
a:hover, a:focus {
color:#000;
text-decoration:none;
}
a span {
display:none; /*hides span*/
}
a:hover span {
display:inline; /*makes span visible*/
color:#369;
text-decoration:none;
}
</style>
</head>
<body>
<a href="">Toronto, Ontario <span>(http://www.city.toronto.on.ca/)</span></a>
</body>
</html>
Sat, 2004-08-07 00:20
#4
changing text NEXT TO a hyperlink on rollover
Firstly, thanks to all three of you who have replied so far offering suggestions.
I've tried the Finch's code with good results, but there are a couple of things that I seem to have difficulty in ironing out.
1. Using the code pretty well 'as-is' resulted in two descriptions appearing on mouse-over, one extra equaly spaced after the other. Clearly the 'appearance' of the new span was pushing the the non-mouseover-activated one to the right
Ok, so it seems I'm going to have to use some kind of CSS positioning...
Hacking together some inline embedded styles resulted in the mouse-overed-description not seeming to appear at all! #-o
However, if I moved the positioning of one of them one pixel to the right or left, it now seemed to allow the mouse-overed description to show. ...However the result is a kind of 'ghosting' or pseudo-bold effect. :? I'd really like to avoid this if possible and aim for a smooth-looking transition. But, as I said above, having them exactly overlap position-wise doesn't seem to allow the mouse-overed description to show over the top of the static lighter-coloured description.
Any further suggestions to iron-out this last quirk?
Oh; here is my hacked up code so far, FYI:
<html>
<head>
<style type="text/css">
a:link, a:visited {
color:#555;
}
a:hover, a:focus {
color:#000;
text-decoration:none;
}
a span {
display:none; /*hides span*/
}
a:hover span {
display:inline; /*makes span visible*/
color:#369;
text-decoration:none;
}
</style>
</head>
<body>
<a href="http://www.yahoo.com/">Yahoo!s directory
<span style="color: '#808080'; position: 'relative'; left: '80';">
< some witty description here
</span>
</a>
<span style="color: '#c0c0c0'; position: 'relative'; left: '79';">
< some witty description here</span>
</body>
</html>
Sat, 2004-08-07 09:59
#5
changing text NEXT TO a hyperlink on rollover
ok, I sort of sorted the main aspect of it out -- I needed to use the "x-index" style to place the static link description to the rear (i.e. set to "-1"), thus the dynamic description can now show itself over the top of it.
So now my simple test file is working! based on "the Finch" 's code
But... when I try to apply these principles to the actual file I need all of this to work in, it goes all screwey, and I can't even seem to adjust the position of the dynamic url description span any more 
So there must be a conflict in my CSS styles somewhere, but I can't seem to find it. If anyone is willing to look at my code to give me a hand through the final legs, I'd appreciate it.
(note: rather than filling this page with code I've provided links to the two files, above, which I'm guessing should be easier)
Sun, 2004-08-08 17:33
#6
changing text NEXT TO a hyperlink on rollover
After re-reading this post, I think I misunderstood what you were looking for, and sent you down a more complicated path than neccessary.
Try this...
Mon, 2004-08-09 10:00
#7
changing text NEXT TO a hyperlink on rollover
This one uses a :hover span to place the text over existing text in a new colour. So the added text is not clickable and does not respond to a mouseover.
Mon, 2004-08-09 11:40
#8
changing text NEXT TO a hyperlink on rollover
Interesting, thanks guys for the javascript alternative! You never stop learning...
Mon, 2004-08-09 13:26
#9
changing text NEXT TO a hyperlink on rollover
ok!
I'm ashamed to say that it took me the better part of 1/2 day ( :oops: ), but I did manage to eventually get "The Finch's" code working within my own file =D> 
Thanks to Mr. (Mrs.?) Finch for that one!
The only niggle was what Stu pointed out which was that the link descriptors also seem to be active as part of the hyperlinks themselves. I couldn't see a way around this with my own limited CSS skills, so/and I was happy to live with this. It would just be a niceity if they weren't.
But then Stu has come along with an alternative suggestion...
I haven't had much time to tinker with it yet, but it looks like an interesting solution (my own experience with expressly defined CSS boxes so far being minimal). My only initial concern is that it seems to be not-straightforward to define seperate styles for links within the footer (see my comments in my above linked file, + also 'View source' option).
I'll have a play around with it between now and Wednesday to see if I can do something more with it, unless someone offers another supplimentry suggestion between now and then.
Thank you once again to everyone who's read and replied so far! 
Wed, 2004-08-11 06:44
#10
changing text NEXT TO a hyperlink on rollover
ok! I got Stu's code to work as well for my own application!
Thank you very much for your own contribution, Stu.
I owe both Stu and 'The Finch' a beer if either of you are ever in Australia! 
(If anyone would like me to post my own version of the final code, please reply and I'll upload the file on my server and link it here.)
Thanks again to all who read this thread and replied.