multiple div change background when hover a link

**jinky0ng** · 01-09-2012, 07:50 PM

hi everyone,

can someone show me how to change the background of multiple div anywhere on a site when you hover a link. For example, when i hover over link "a" , div with class "e" and "f" background change to gray. or maybe a script that can do this function. The code is below. Thank you

Code:

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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="main">
<div class="col1">
<div class="a"><a href="#">a</a></div>
<div class="b">b</div>
</div>
</div>
<div class="col2">
<div class="c">c</div>
<div class="d">d</div>
</div>
<div class="col3">
<div class="e">e</div>
<div class="f">f</div>
</div>
</div>

</body>
</html>

**keyboard** · 01-10-2012, 10:22 AM

HTML Code:

<script type="text/javascript">
function mouseover()
{
var e = document.getElementById('e'); 
var f = document.getElementById('f'); 
e.style.color='grey';
f.style.color='grey';
}
</script>

<div id="a" onMouseOver="mouseover()">
TEXT
</div>
<br />
<br />
<div id="e">
TEXT
</div>
<div id="f">
TEXT
</div>

When you put your mouse over the div with id=a the 2 other divs will change to grey.
This is the same theory but using id's instead of classes. I'm not sure how to swap classes for id's.
Hope this helps...
Keyboard1333

**vwphillips** · 01-10-2012, 01:52 PM

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
.gray {
  background-Color:gray;
}

/*]]>*/
</style>
<script  type="text/javascript">
/*<![CDATA[*/

function BG(){
 var args=BG.arguments,cls=args[1],els,z0=0,z0a,reg;
 if (cls){
  els=document.getElementsByTagName('DIV');
  for (z0=0;z0<els.length;z0++){
   for (z0a=2;z0a<args.length;z0a++){
    reg=new RegExp('\\b'+args[z0a]+'\\b')
    if(reg.test(els[z0].className)){
     if (args[0]){
      els[z0].className+=' '+cls;
     }
     else {
      els[z0].className=els[z0].className.replace(' '+cls,'');
     }
    }
   }
  }
 }
}

/*]]>*/
</script>
</head>

<body>
<div id="main">
 <div class="col1">
  <div class="a"><a href="#" onmouseover="BG(true,'gray','e','f');" onmouseout="BG(false,'gray','e','f');" >a</a></div>
  <div class="b">b</div>
 </div>
 </div>
 <div class="col2">
  <div class="c">c</div>
  <div class="d">d</div>
 </div>
 <div class="col3">
  <div class="e">e</div>
  <div class="f">f</div>
 </div>
</div>


</body>
</html>

Thread: multiple div change background when hover a link

Thread Tools

Search Thread

multiple div change background when hover a link

Reply

Bookmarks

Bookmarks

Posting Permissions