link/text rollover question

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

link/text rollover question

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> link/text rollover question

Page: [1]


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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? < Message edited by c1sissy -- 5/13/2004 9:21:22 > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/


Donkey Posts: 3869 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: link/text rollover question - 5/13/2004 10:34:04 Why not just make it one big link? _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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! _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Donkey)


Donkey Posts: 3869 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	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. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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 _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Donkey)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: link/text rollover question - 5/13/2004 14:10:36 Deb www.listamatic.com all their menus are lists _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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> < Message edited by jaybee -- 5/13/2004 19:44:59 > _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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, _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to jaybee)


Giomanach Posts: 6090 Joined: 11/19/2003 From: England Status: offline	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 _____________________________ (in reply to c1sissy)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: link/text rollover question - 5/14/2004 5:54:34 Whaddya mean... MIGHT WORK!!!!! It does work. Cheek. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Giomanach)


Donkey Posts: 3869 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	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? _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to jaybee)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Donkey)

Donkey

Posts: 3869
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

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?

_____________________________

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to c1sissy)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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?? _____________________________ David Prescott Gekko web design (in reply to Donkey)


Donkey Posts: 3869 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	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. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to d a v e)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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... _____________________________ David Prescott Gekko web design (in reply to Donkey)


Donkey Posts: 3869 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	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. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to d a v e)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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. _____________________________ David Prescott Gekko web design (in reply to Donkey)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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 _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to d a v e)

Donkey

Posts: 3869
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

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.

_____________________________

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: link/text rollover question - 5/15/2004 11:48:20 Thanks doneky, I appreciate your doing this. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Donkey)


caz Posts: 3520 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	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> < Message edited by c1sissy -- 10/4/2004 18:11:32 > _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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? _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to caz)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets >> link/text rollover question

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts