| | |
CSS hover on individual link (li) ???
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/te...rma/index.html
However, I wish to have MY OWN font style on each links as it can be seen on:
The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/P...te/contact.php
i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.
My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???
I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.
My CSS code so far is:
However, I wish to have MY OWN font style on each links as it can be seen on:
The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/P...te/contact.php
i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.
HTML and CSS Syntax (Toggle Plain Text)
<li><a title="link six" href="index.html">link six</a></li> <li><a title="link five" href="index.html">link five</a></li> <li><a title="link four" href="index.html">link four</a></li> <li><a title="link three" href="index.html">link three</a></li> <li><a title="link two" href="index.html">link two</a></li> <li><a title="link one" href="index.html">link one</a></li>
My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???
I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.
My CSS code so far is:
HTML and CSS Syntax (Toggle Plain Text)
/* CSS Document */ body { background-color:black; background-attachment:fixed; } /* .................................... HEADER & FOOTER ................................... */ #header { font-family:Georgia, "Times New Roman", Times, serif; color:white; text-align:center; width:100%; } #header a { color:yellow; text-decoration:none; } #header a:hover { text-decoration:underline; } #footer { font-family:Georgia, "Times New Roman", Times, serif; color:white; text-align:center; border-top:3px solid fuchsia; float:left; background-color:black; width:100%; } #footer a { color:yellow; text-decoration:none; } #footer a:hover { text-decoration:underline; } /* ........................................ BANNER ........................................ */ #banner { width:100%; border:none; text-align:center; background-color:none; } /* ......................................... TOP MENU .................................... */ #topMenu { width:100%; float:right; border:none; } #topMenu ul { float:left; margin-left:4%; } #topMenu ul li { display:inline; width:20%; } /* ................................... CONTENT ................................................ */ #leftContent { float:left; width:10%; border:1px solid red; background-color:green; } #centerContent { background-color:white; width:75%; margin-left:1%; float:left; border:1px solid green; } #centerContent ul { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; list-style-type:decimal; color:black; } #centerContent li { margin:3% 3%; line-height:1.5em; } #rightContent { float:right; background-color:fuchsia; border:1px solid red; width:10%; } /* ................................... STYLES ......................................... */ p.first-letter:first-letter { color:red; margin-left:5%; font-size:xx-large; } p { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; font-size:medium; line-height:1.5em; margin:2% 3%; color:black; } h4 { font-family:Georgia, "Times New Roman", Times, serif; text-align:center; font-size:x-large; color:green; } h5 { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; font-size:medium; margin:2% 3%; color:blue; } h6 { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; margin:0; font-size:medium; font-weight:normal; color:red; } .italic { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:black; font-style:italic; } .bold { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:black; font-weight:bold; } .colorTextRed { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:red; } .colorTextBlue { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:blue; } .colorTextGreen { font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; color:green; } /* ................................... TABLE ......................................... */ #contactTable { background-color:white; border-spacing:2%; margin:3% 3%; font-family:Georgia, "Times New Roman", Times, serif; text-align:left; } #contactTable tr { border:none; } #contactTable th { color:fuchsia; } #contactTable td { font-size:medium; color:black; } /* ................................... CLASSES ......................................... */ .table { background-color:white; border-spacing:2%; margin:3% 3%; font-family:Georgia, "Times New Roman", Times, serif; border-collapse:collapse; text-align:left; } .tr { border:none; } .td { border:thin solid red; font-size:medium; padding:2px; text-align:center; color:black; }
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.
The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.
You want to use old-fashioned image rollover code, if your buttons/links are going to be images.
The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.
You want to use old-fashioned image rollover code, if your buttons/links are going to be images.
Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.
Dani the Computer Science Gal 
Follow my Twitter feed! twitter.com/DaniWeb
And if you're interested in Internet marketing there is twitter.com/DaniWebAds

Follow my Twitter feed! twitter.com/DaniWeb
And if you're interested in Internet marketing there is twitter.com/DaniWebAds
•
•
•
•
Originally Posted by tgreer
The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.
The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.
You want to use old-fashioned image rollover code, if your buttons/links are going to be images.
Afterall, in my style-sheet, I could have "li hover" OR "li a hover" but this "li" would be applicable for ALL the "li" i.e. Owner, Services, Contact, etc. but how do I go about having a code that allows me to have each INDIVIDUAL "li" (Owner, Services, Contact, etc.)
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
•
•
Originally Posted by cscgal
Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!
James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.
James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.
•
•
•
•
Originally Posted by tgreer
Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!
James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.
All my relevant files i.e. "style.css", "contact.php" and images in "topmenu" folder (second last in the list) can be seen on:
http://members.lycos.co.uk/darsh25/personal_website/
I've got two images now (can be seen from folder "topmenu") for the "About" link i.e. "about.jpg" (with little dark background) for the NORMAL view and "about1hover.jpg" (with brighter background) for the HOVER view.
The relevant code for this in CSS is:
HTML and CSS Syntax (Toggle Plain Text)
#aboutLink a:hover { background:url(topmenu/about1hover.jpg); }
and the related HTML code is:
HTML and CSS Syntax (Toggle Plain Text)
<div id="aboutLink"><a href="aboutus.php"><img src="topmenu/about.jpg" border="0"></a></div>
It's more like a SWAP of images where "about.jpg" gets swapped with "about1hover.jpg" when the mouse is hover over it.
Last edited by j4mes_bond25; Jun 16th, 2006 at 10:59 am.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
![]() |
Similar Threads
- Changing Mouse Cursor (JavaScript / DHTML / AJAX)
- Hover Image Position ??? (HTML and CSS)
- Basic hover code question (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Help with making a survey form
- Next Thread: indesign to web...
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl






