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?

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>

**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/s...ad.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...

Code:


<!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

Thread: Changing bottom-border onHover

Thread Tools

Search Thread

Changing bottom-border onHover

Bookmarks

Bookmarks

Posting Permissions