CSS hover on individual link (li) ???

Reply

Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

CSS hover on individual link (li) ???

 
0
  #1
Jun 14th, 2006
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.

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <li><a title="link six" href="index.html">link six</a></li>
  3. <li><a title="link five" href="index.html">link five</a></li>
  4. <li><a title="link four" href="index.html">link four</a></li>
  5. <li><a title="link three" href="index.html">link three</a></li>
  6. <li><a title="link two" href="index.html">link two</a></li>
  7. <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)
  1. /* CSS Document */
  2.  
  3. body
  4. {
  5. background-color:black;
  6. background-attachment:fixed;
  7. }
  8.  
  9. /* .................................... HEADER & FOOTER ................................... */
  10.  
  11. #header
  12. {
  13. font-family:Georgia, "Times New Roman", Times, serif;
  14. color:white;
  15. text-align:center;
  16. width:100%;
  17. }
  18.  
  19. #header a
  20. {
  21. color:yellow;
  22. text-decoration:none;
  23. }
  24.  
  25. #header a:hover
  26. {
  27. text-decoration:underline;
  28. }
  29.  
  30. #footer
  31. {
  32. font-family:Georgia, "Times New Roman", Times, serif;
  33. color:white;
  34. text-align:center;
  35. border-top:3px solid fuchsia;
  36. float:left;
  37. background-color:black;
  38. width:100%;
  39. }
  40.  
  41. #footer a
  42. {
  43. color:yellow;
  44. text-decoration:none;
  45. }
  46.  
  47. #footer a:hover
  48. {
  49. text-decoration:underline;
  50. }
  51.  
  52. /* ........................................ BANNER ........................................ */
  53.  
  54. #banner
  55. {
  56. width:100%;
  57. border:none;
  58. text-align:center;
  59. background-color:none;
  60. }
  61.  
  62. /* ......................................... TOP MENU .................................... */
  63.  
  64. #topMenu
  65. {
  66. width:100%;
  67. float:right;
  68. border:none;
  69. }
  70.  
  71. #topMenu ul
  72. {
  73. float:left;
  74. margin-left:4%;
  75. }
  76.  
  77. #topMenu ul li
  78. {
  79. display:inline;
  80. width:20%;
  81. }
  82.  
  83.  
  84. /* ................................... CONTENT ................................................ */
  85.  
  86. #leftContent
  87. {
  88. float:left;
  89. width:10%;
  90. border:1px solid red;
  91. background-color:green;
  92. }
  93.  
  94. #centerContent
  95. {
  96. background-color:white;
  97. width:75%;
  98. margin-left:1%;
  99. float:left;
  100. border:1px solid green;
  101. }
  102.  
  103. #centerContent ul
  104. {
  105. font-family:Georgia, "Times New Roman", Times, serif;
  106. text-align:justify;
  107. list-style-type:decimal;
  108. color:black;
  109. }
  110.  
  111. #centerContent li
  112. {
  113. margin:3% 3%;
  114. line-height:1.5em;
  115. }
  116.  
  117. #rightContent
  118. {
  119. float:right;
  120. background-color:fuchsia;
  121. border:1px solid red;
  122. width:10%;
  123. }
  124.  
  125. /* ................................... STYLES ......................................... */
  126.  
  127. p.first-letter:first-letter
  128. {
  129. color:red;
  130. margin-left:5%;
  131. font-size:xx-large;
  132. }
  133.  
  134. p
  135. {
  136. font-family:Georgia, "Times New Roman", Times, serif;
  137. text-align:justify;
  138. font-size:medium;
  139. line-height:1.5em;
  140. margin:2% 3%;
  141. color:black;
  142. }
  143.  
  144. h4
  145. {
  146. font-family:Georgia, "Times New Roman", Times, serif;
  147. text-align:center;
  148. font-size:x-large;
  149. color:green;
  150. }
  151.  
  152. h5
  153. {
  154. font-family:Georgia, "Times New Roman", Times, serif;
  155. text-align:justify;
  156. font-size:medium;
  157. margin:2% 3%;
  158. color:blue;
  159. }
  160.  
  161. h6
  162. {
  163. font-family:Georgia, "Times New Roman", Times, serif;
  164. text-align:justify;
  165. margin:0;
  166. font-size:medium;
  167. font-weight:normal;
  168. color:red;
  169. }
  170.  
  171. .italic
  172. {
  173. font-family:Georgia, "Times New Roman", Times, serif;
  174. text-align:justify;
  175. color:black;
  176. font-style:italic;
  177. }
  178.  
  179. .bold
  180. {
  181. font-family:Georgia, "Times New Roman", Times, serif;
  182. text-align:justify;
  183. color:black;
  184. font-weight:bold;
  185. }
  186.  
  187. .colorTextRed
  188. {
  189. font-family:Georgia, "Times New Roman", Times, serif;
  190. text-align:justify;
  191. color:red;
  192. }
  193.  
  194. .colorTextBlue
  195. {
  196. font-family:Georgia, "Times New Roman", Times, serif;
  197. text-align:justify;
  198. color:blue;
  199. }
  200.  
  201. .colorTextGreen
  202. {
  203. font-family:Georgia, "Times New Roman", Times, serif;
  204. text-align:justify;
  205. color:green;
  206. }
  207.  
  208. /* ................................... TABLE ......................................... */
  209.  
  210. #contactTable
  211. {
  212. background-color:white;
  213. border-spacing:2%;
  214. margin:3% 3%;
  215. font-family:Georgia, "Times New Roman", Times, serif;
  216. text-align:left;
  217. }
  218.  
  219. #contactTable tr
  220. {
  221. border:none;
  222. }
  223.  
  224. #contactTable th
  225. {
  226. color:fuchsia;
  227. }
  228.  
  229. #contactTable td
  230. {
  231. font-size:medium;
  232. color:black;
  233. }
  234.  
  235. /* ................................... CLASSES ......................................... */
  236.  
  237. .table
  238. {
  239. background-color:white;
  240. border-spacing:2%;
  241. margin:3% 3%;
  242. font-family:Georgia, "Times New Roman", Times, serif;
  243. border-collapse:collapse;
  244. text-align:left;
  245. }
  246.  
  247. .tr
  248. {
  249. border:none;
  250. }
  251.  
  252. .td
  253. {
  254. border:thin solid red;
  255. font-size:medium;
  256. padding:2px;
  257. text-align:center;
  258. color:black;
  259. }
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: CSS hover on individual link (li) ???

 
0
  #2
Jun 14th, 2006
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.
Reply With Quote Quick reply to this message  
Join Date: Feb 2002
Posts: 12,047
Reputation: cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light 
Solved Threads: 129
Administrator
Staff Writer
cscgal's Avatar
cscgal cscgal is offline Offline
The Queen of DaniWeb

Re: CSS hover on individual link (li) ???

 
0
  #3
Jun 14th, 2006
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
Reply With Quote Quick reply to this message  
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: CSS hover on individual link (li) ???

 
0
  #4
Jun 14th, 2006
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.
Yes, this is exactly what I have in mind i.e. creat 2 different "images" one the normal & other the hover but how could I "hover" each INDIVIDUAL "li" on this menu ???

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 ;)
Reply With Quote Quick reply to this message  
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: CSS hover on individual link (li) ???

 
0
  #5
Jun 14th, 2006
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.
So, you meant to say that I'd have to do this for EACH INDIVIDUAL images i.e. in my CSS I would have "owner img" AND "owner img hover", "service img" AND "service img hover", "contact img" AND "contact img hover", etc..
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: CSS hover on individual link (li) ???

 
0
  #6
Jun 14th, 2006
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: CSS hover on individual link (li) ???

 
0
  #7
Jun 16th, 2006
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.
Thanks for your help, however, I fear I'm constantly failing to achieve the desired result.

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)
  1. #aboutLink a:hover
  2. {
  3. background:url(topmenu/about1hover.jpg);
  4. }

and the related HTML code is:

HTML and CSS Syntax (Toggle Plain Text)
  1. <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 ;)
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC