Forum Moderators: open
I'm not sure how different the JavaScript will appear but this script simply changes the class. I want to specifically change the pseudo-class. So I want to ultimately change the script from changing the class to "menuh" and instead have it change it to "menu:hover". We are of course changing the hover state of the first element while hovering over the second and they are not nested in any way.
- John
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Change pseudo-class of different element onmouseover</title>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>
<style type="text/css">
div.menu {
background: #aaa;
color: #000;
}
div.menuh {
background: #f0f;
color: #000;
}
div.menu:hover {
background: #000;
color: #fff;
}
</style>
</head>
<body><div class="menu" id="menu1">Menu 1</div>
<div onmouseover="change('menu1', 'menuh');" onmouseout="change('menu1', 'menu');">onmouseover here</div>
</body>
</html>
