PDA

View Full Version : 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:

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