Log in

View Full Version : Changing bottom-border onHover


miatoromatic
02-28-2011, 02:57 AM
How can I get the bottom-border to change its color accordingly to which button is hovered over?


<!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>
Beverleyh
02-28-2011, 11:46 AM
you'll probably need to look into javascript - you can use the same principles as covered in this thread: http://www.dynamicdrive.com/forums/showthread.php?t=39641
coothead
02-28-2011, 02:50 PM
Hi there miatoromatic,

and a warm welcome to these forums. ;)

Here is a basic javascript method...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Untitled Document</title>

<style type="text/css">
#links {
padding-bottom:10px;
border-width:0 0 1px;
border-style:solid;
}
#links li{
display:inline;
}
#links a {
margin:0 5px;
color:#000;
}
#links a:hover {
color:#f00;
}
.bottom {border-color:#0ff;}
.bottom0 {border-color:#00f;}
.bottom1 {border-color:#000;}
.bottom2 {border-color:#ccc;}
.bottom3 {border-color:#f00;}
.bottom4 {border-color:#fc0;}
</style>

<script type="text/javascript">

function init(){

var obj=document.getElementById('links');
var a=obj.getElementsByTagName('a');

for(var c=0;c<a.length;c++) {
a[c].number=c;
a[c].onmouseover=function() {
obj.className='bottom'+this.number;
this.onmouseout=function() {
obj.className='bottom';
}
}
}
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>
</head>

<body>

<ul id="links" class="bottom">
<li><a href="#">Button #0</a></li>
<li><a href="#">Button #1</a></li>
<li><a href="#">Button #2</a></li>
<li><a href="#">Button #3</a></li>
<li><a href="#">Button #4</a></li>
</ul>

</body>
</html>

coothead