Change pseudo-class of different element onmouseover?
Posted: Sun Jan 14, 2007 1:21 am
feyd | Please use
feyd | Please use[/syntax]
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
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.
[syntax="html"]<?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> feyd | Please use[/syntax]
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]