Change pseudo-class of different element onmouseover?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Change pseudo-class of different element onmouseover?

Post by JAB Creations »

feyd | Please use

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]
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

As far as I know you can't trigger pseudo styles like this. I would use two names for these rules like this:

Code: Select all

menu.hover, menu:hover {color:red;}
Post Reply