OnHover CSS change |
OnHover CSS change |
inusm |
Feb 27 2011, 09:43 PM
Post
#1
|
Newbie Group: Members Posts: 16 Joined: 29-January 11 Member No.: 13,739 |
How can I get the bottom-border to change its color accordingly to which button is hovered over?
CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .bottom { border-bottom: 1px solid #0FF; } .bottom1 { border-bottom: 1px solid #0FF; } .bottom2 { border-bottom: 1px solid #000; } .bottom3 { border-bottom: 1px solid #CCC; } .bottom4 { border-bottom: 1px solid #FFF; } .bottom5 { border-bottom: 1px solid #FFF000; } li { display: inline; } </style> </head> <body> <div class='bottom'> <ul> <li><a href='somewhere1'>Button #1</a></li> <li><a href='somewhere2'>Button #1</a></li> <li><a href='somewhere3'>Button #1</a></li> <li><a href='somewhere4'>Button #1</a></li> <li><a href='somewhere5'>Button #1</a></li> </ul> </div> </body> </html> |
Frederiek |
Feb 28 2011, 02:50 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Something like this:
... <li><a href="somewhere1" class="button1">Button #1</a></li> ... CODE a.button1:hover { border-bottom: 1px solid #0FF; } If you want each link to have another border-bottom, then give each link another class that you style in a similar way as above. See the FAQ at http://htmlhelp.com/faq/html/links.html#link-hover and the QA's before that one. |
inusm |
Feb 28 2011, 10:53 AM
Post
#3
|
Newbie Group: Members Posts: 16 Joined: 29-January 11 Member No.: 13,739 |
I actually wanted to change the color of the border class 'bottom' where the bottom-border spans across the entire div instead of just the link.
This post has been edited by inusm: Feb 28 2011, 10:53 AM |
Barthal |
Feb 28 2011, 10:55 AM
Post
#4
|
Member Group: Members Posts: 50 Joined: 22-November 10 Member No.: 13,209 |
I think you may need javascript or jquery for that
This post has been edited by Barthal: Feb 28 2011, 10:56 AM |
inusm |
Feb 28 2011, 10:59 AM
Post
#5
|
Newbie Group: Members Posts: 16 Joined: 29-January 11 Member No.: 13,739 |
Could a mod move this topic to the js programing forum please?
As expected, staying with simple html doesn't work. >_< |
pandy |
Feb 28 2011, 11:07 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Then use :hover with .bottom, .bottom1 and so on rather than with A. You can use hover with any element, but it only works with links in IE6 and older, but maybe that isn't a big issue.
|
inusm |
Feb 28 2011, 11:11 AM
Post
#7
|
Newbie Group: Members Posts: 16 Joined: 29-January 11 Member No.: 13,739 |
Could you demonstrate how it works? I am a little confuse as to how to structure this.
|
pandy |
Mar 1 2011, 05:09 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Oh crap! I missed that you wanted different borders when different links were hovered. I move.
|
Christian J |
Mar 1 2011, 10:13 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
Here's a JS idea. The color's hex value (without the # sign) is set in the class attributes:
CODE <style type="text/css" media="screen"> li {display: inline;} </style> <ul id="nav"> <li><a href='somewhere1' class="f00">Button a</a></li> <li><a href='somewhere2' class="00f">Button b</a></li> </ul> <script type="text/javascript"> var nav=document.getElementById('nav'); var a=nav.getElementsByTagName('a'); for(var i=0; i<a.length; i++) { a[i].onmouseover=function() { nav.style.borderBottom='solid #'+this.className; } a[i].onmouseout=function() { nav.style.borderBottom='0'; } } </script> |
Christian J |
Mar 1 2011, 10:14 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
Just for fun here's a CSS version also. Not sure if it's as reliable as using JS:
CODE <style type="text/css" media="screen"> ul { position: relative; width: 50%; height: 1.6em; margin: 0; padding: 0; list-style: none; color: #000; background: #eee; } li {display: inline;} a:hover {border: 0;} /* necessary for IE6 */ a:hover span { position: absolute; bottom: 0; left: 0; width: 100%; } a.a:hover span {border-bottom: solid red;} a.b:hover span {border-bottom: solid blue;} </style> <ul> <li><a href='somewhere1' class="a">Button a<span></span></a></li> <li><a href='somewhere2' class="b">Button b<span></span></a></li> </ul> |
Lo-Fi Version | Time is now: 26th April 2024 - 07:46 PM |