Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ OnHover CSS change
Posted by: inusm Feb 27 2011, 09:43 PM
How can I get the bottom-border to change its color accordingly to which button is hovered over?
<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>
Posted by: Frederiek Feb 28 2011, 02:50 AM
Something like this:
...
<li><a href="somewhere1" class="button1">Button #1</a></li>
...
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.
Posted by: inusm Feb 28 2011, 10:53 AM
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.
Posted by: Barthal Feb 28 2011, 10:55 AM
I think you may need javascript or jquery for that
Posted by: inusm Feb 28 2011, 10:59 AM
Could a mod move this topic to the js programing forum please?
As expected, staying with simple html doesn't work. >_<
Posted by: pandy Feb 28 2011, 11:07 AM
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.
Posted by: inusm Feb 28 2011, 11:11 AM
Could you demonstrate how it works? I am a little confuse as to how to structure this.
Posted by: pandy Mar 1 2011, 05:09 AM
Oh crap! I missed that you wanted different borders when different links were hovered. I move. 
Posted by: Christian J Mar 1 2011, 10:13 AM
Here's a JS idea. The color's hex value (without the # sign) is set in the class attributes:
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>
Posted by: Christian J Mar 1 2011, 10:14 AM
Just for fun here's a CSS version also. Not sure if it's as reliable as using JS:
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>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)