link/text rollover question

link/text rollover question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

c1sissy -> link/text rollover question (5/13/2004 9:20:33)
What I want to try out is the following, I have a link that will change color when I do a mouse over, I know how to do this with the hover. Now, what if I want the description following the link to have a color change as well, how would I do this without Javascript?

Donkey -> RE: link/text rollover question (5/13/2004 10:34:04)
Why not just make it one big link?

c1sissy -> RE: link/text rollover question (5/13/2004 10:58:19)
quote: ORIGINAL: Donkey Why not just make it one big link? I had thought about that, but was wondering if there were another way to do this.(besides that sounded too easy ;>) Thanks Donkey I appreciate your response!

Donkey -> RE: link/text rollover question (5/13/2004 12:00:20)
quote: (besides that sounded too easy ;>) If there's an easy way I try and use it[;)] It's called being lazy. I'm interested to see if there is a better method,and I'm surprised none of the CSS experts have come up with an answer yet.

c1sissy -> RE: link/text rollover question (5/13/2004 12:06:40)
My only thing with doing it like this would be the layout. And the amount of times that you would need to assign either a class or id to the section. If that makes sense. Have you seen anything in regards to assigning :hover to an ul or ol? I have been searching here all morning, and some last night, but no luck with it. I think I'll pull some of my books off the nice bookshelf that my son just made me to organize my library of pc books [:D][;)][8D]

jaybee -> RE: link/text rollover question (5/13/2004 14:10:36)
Deb www.listamatic.com all their menus are lists

c1sissy -> RE: link/text rollover question (5/13/2004 14:31:29)
quote: ORIGINAL: jaybee Deb www.listamatic.com all their menus are lists Been there. Still doesn't give me what I want to do. Guess I"ll have to go the way that Donkey suggests. Only thing is that I am working with a def list instead of ordered and unordered list.

jaybee -> RE: link/text rollover question (5/13/2004 14:42:13)
I must admit, I'd go the way Donkey suggests. I've done something similar on my own site with the menu where I needed the text in two different sizes. I originally just had the large letter as mouseover and hyper but then Gorilla said it was confusing so I spent the next few days faffing around with various options that wouldn't work on different browsers. Eventually came up with what I have and it seems OK. <a href="design.html">D<span class="shrinknav">esign</span></a>

c1sissy -> RE: link/text rollover question (5/13/2004 15:11:45)
Yes, that is what I want it to do, but I want white, and when you mouse over I get my different colors. Thanks guys,

Giomanach -> RE: link/text rollover question (5/14/2004 3:34:39)
Use what JB has offered, and make sure you have the different colours in the <span> class/id. Might work Dan

jaybee -> RE: link/text rollover question (5/14/2004 5:54:34)
Whaddya mean... MIGHT WORK!!!!! It does work. Cheek. [;)]

Donkey -> RE: link/text rollover question (5/14/2004 7:19:31)
quote: It does work ? I tried this yesterday as one of several ideas I finally discarded before leaving it for someone else (who new what they were doing) to solve. I didn't work for me because the span inside the link text wouldn't overide the formatting in the a class I was using. i.e. It wouldn't change the colour or remove an underline on the hover pseudo class. Is there a trick I'm missing?

c1sissy -> RE: link/text rollover question (5/14/2004 8:21:37)
Try using an id. I had read this somewhere that if you are using a class, and it doesn't work, go with ID. Not sure where I read it or I would post it here for you to see.

Donkey -> RE: link/text rollover question (5/14/2004 12:43:53)
quote: Try using an id. Still won't work, it will change the font size and colour but won't remove the underline on hover unless you insert a <br/> just before the span. Using the following #noline{ font-size: 80%; color: #FFF; } #noline:hover{ font-size: 80%; color: aqua; text-decoration: none; } & in the html <a class="wl" href="/pageurl">linktext here<br/><span ID="noline">additional text here</span></a> The underline won't appear on hover on the additional text, and it changes colour but only if you hover over the additional text. If you hover over the link text the additional text won't change. Also if you hover over the additional text the link text does change. So is there a way to make the additional text change when you hover over the link?

d a v e -> RE: link/text rollover question (5/14/2004 13:27:18)
i'm not clear on why you would want to do this, and if so why you can't use javascript: users with javascript disabled will still see the link function thought they would miss out on the additional text. could you post a link to an idea of what you're trying to do??

Donkey -> RE: link/text rollover question (5/14/2004 14:21:02)
quote: i'm not clear on why you would want to do this I don't want to do it for myself. Deb posed the question and I just wondered if it could be done. Sorry if I'm wasting time going up a blind alley, I can be a tad pedantic at times.[;)]

d a v e -> RE: link/text rollover question (5/14/2004 14:33:00)
i didn't say i didn't want to know ;) I'm curious too, but i can't quite get my head around what you're trying to...

Donkey -> RE: link/text rollover question (5/15/2004 7:27:25)
quote: I'm curious too, but i can't quite get my head around what you're trying to... I was trying to make a link (which already has a class that makes it change colour and underline on hover) also change other text differently. So for instance the first two words in a paragraph would change from red to blue and underline and at the same time the rest of the paragraph (which is already a different font size) turns from red to yellow without the underline. The code above "sort-of" works but the rest of the paragraph only changes colour when you hover over it (not the first two words), although the first two words change and become underlined if you hover over the rest of the paragrapgh. So purely as an exercise I was wondering if it is possible with CSS to achieve the same thing but so that when you hover over the first two words they change and become underlined and the rest of the paragraph just changes colour.

d a v e -> RE: link/text rollover question (5/15/2004 8:51:53)
how about the first-child pseudo element? (well what about it?!!) I thinking a long the line of using the first line and to modify the link style. so you have one link stlye (say green text on hover) but over-ride the first line (using the first line pseudo class) and maybe use important to do this and make the text red (or whatever) http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo well ,maybe... of course you might put some padding/margin after when you define the first line style to give the appearance of a line break/paragraph break.

c1sissy -> RE: link/text rollover question (5/15/2004 10:37:46)
Ok guys, here it is, forget the nav for a second. I have two lines written in black words. Line one, when I hover over it, I want just the background, not the words to change to yellow.(or whatver color) Line two, when I hover over it, I want just the background, not the words to change to say grey. Now as far as the underline goes, that would be put in there as a no underline if you are using the anchor linking process of doing this. Now I read in Eric meyers book, that there is something called the bare hover. Which you could then use for paragraphs etc... Not sure if this would work or not. Later today I am going to try to research the term and see what it comes up with

Donkey -> RE: link/text rollover question (5/15/2004 11:20:15)

I thought you wanted to make, for instance, hovering over line one change lines one and two.

I've just adapted some code I use for an in-line button effect and it will do what you describe above.
In the CSS file:

/*TURNS BACKGROUND YELLOW*/
a.yello{
display:block;
width: 100%;
padding: 0 0 0 0; 
border; 0 0 0 0;
margin: 0 0 0 0; 
background-color: transparent;
color: #000;
text-decoration: none; 
text-align: center;
font-size:1em; 
font-family: tahoma,helvetica,sans-serif; 
font-style: normal;
 }
a.yello:link{
width: 100%;
text-decoration: none;
}
a.yello:visited{
width: 100%;
text-decoration: none;
}
a.yello:hover{
width: 100%;
background-color: #FFC;
font-style: normal;
color: #000;
text-decoration: none;
}
a.yello:focus{
width: 100%;
text-decoration: none;
}
a.yello:active{
width: 100%;
background-color: #FFC;
color: #000;
text-decoration: none; 
}

/*TURNS BACKGROUND GREY*/
a.grey{
display:block;
width: 100%;
padding: 0 0 0 0; 
border; 0 0 0 0;
margin: 0 0 0 0; 
background-color: transparent;
color: #000;
text-decoration: none; 
text-align: center;
font-size:1em; 
font-family: tahoma,helvetica,sans-serif; 
font-style: normal;
 }
a.grey:link{
width: 100%;
text-decoration: none;
}
a.grey:visited{
width: 100%;
text-decoration: none;
}
a.grey:hover{
width: 100%;
background-color: #699;
font-style: normal;
color: #000;
text-decoration: none;
}
a.grey:focus{
width: 100%;
text-decoration: none;
}
a.grey:active{
width: 100%;
background-color: #699;
color: #000;
text-decoration: none; 
}

And in the html:

<a class="yello" href="/your link">First line here</a>

<a class="grey" href="/your link">second line here</a>

You will need to change colours, font size, padding, margins etc. to suit and you may be able to cut down the code slightly by using shorthand versions and leaving some lines out, but that code does work.

c1sissy -> RE: link/text rollover question (5/15/2004 11:48:20)
Thanks doneky, I appreciate your doing this.

caz -> RE: link/text rollover question (5/16/2004 7:30:23)
I came up with this about bare hover: http://devedge.netscape.com/viewsource/2003/arbitrary-hover/ Any use, Deb? <edited for link correction>previous link was not working anymore<c1sissy>

c1sissy -> RE: link/text rollover question (5/16/2004 8:00:41)
Thanks Carol, I did find the same thing. Now it is a matter of getting all of the information to connect the dots in my head to do this. Thanks everyone for your imput. Pretty interesting article isn't it Carol?

Page: [1]

7.421875E-02