10 replies [Last post]
Majestic21c
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+10
Joined: 2004-08-06
Posts: 6
Points: 0

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! Smile

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 15 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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 Wink)

Hope that helps a bit.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

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.)

Verschwindende wrote:
  • CSS doesn't make pies

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 41 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

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>

Majestic21c
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+10
Joined: 2004-08-06
Posts: 6
Points: 0

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';">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;some witty description here
	</span>
</a>
<span style="color: '#c0c0c0'; position: 'relative'; left: '79';">&nbsp;
	&lt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;some witty description here</span>
 
</body> 
</html>

Majestic21c
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+10
Joined: 2004-08-06
Posts: 6
Points: 0

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 Smile

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 Sad

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)

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 41 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

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...

example

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 17 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

http://www.stunicholls.myby.co.uk/cssforum/listover.html

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 15 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

changing text NEXT TO a hyperlink on rollover

Interesting, thanks guys for the javascript alternative! You never stop learning...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Majestic21c
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+10
Joined: 2004-08-06
Posts: 6
Points: 0

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> Laughing out loud
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! Laughing out loud Cool

Majestic21c
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+10
Joined: 2004-08-06
Posts: 6
Points: 0

changing text NEXT TO a hyperlink on rollover

ok! I got Stu's code to work as well for my own application! Cool

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! Smile Tongue

(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.