Log in

View Full Version : hover multiple div at once


jinky0ng
01-09-2012, 04:02 PM
hi everyone,

can someone show me how to change the background of multiple div 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



<!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>
ashimaathri
01-17-2012, 09:33 AM
<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>
<script>
function change() {
document.getElementById('e').style.backgroundColor="gray";
document.getElementById('f').style.backgroundColor="gray";
}
function changeback() {
document.getElementById('e').style.backgroundColor="#ffffff";
document.getElementById('f').style.backgroundColor="#ffffff";
}
</script>
<div id="main">
<div id="col1">
<div id="a" onmouseover="change()" onmouseout="changeback()"><a href="#">a</a></div>
<div id="b">b</div>
</div>
</div>
<div id="col2">
<div id="c">c</div>
<div id="d">d</div>
</div>
<div id="col3">
<div id="e">e</div>
<div id="f">f</div>
</div>
</div>

</body>
</html>