Forum Moderators: not2easy
I have a problem with CSS divs and MouseOver thing:
I have 2 divs, both have a different position, and a different background color (red and blue). In the HTML source, the second div is "into" the first div (<div1><div2></div2></div1>).
I have added a "onmouseover" and "onmouseout" for each div (it changes/replaces the background color).
But, when the cursor is over the div2, the background color of div1 changed too.
How can i am make this not happen? What i want is when you pass your cursor over div1, div1 back changes. When you pass your cursor over div2, div2 back changes (and not even div1).
If i have put one div into the other, it is because i want div2 to have a relative position from div1.
Here is the global code:
<html><head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"
<title>Menu</title><style type="text/css" media="screen"><!--
#cnrLft { background-image: url(images/content_cnr_lft.gif); visibility: visible; position: relative; top: 49px; left: 66px; width: 12px; height: 23px; border-bottom: 1px solid #fff }
.allLevelON { color: #fae04e; font-family : Tahoma, Arial; font-size: 12px; font-weight: bold; background-color: #595b5e; padding-top: 1px; border-right: 1px solid #fff }
.level1 { background-color: #93aaba;color: #fff; font-family : Tahoma, Arial; font-size: 12px; font-weight: bold; cursor: pointer; padding-top: 1px; border-right: 1px solid #fff }
.level2 { background-color: #7399b3; color: #fff; font-family : Tahoma, Arial; font-size: 12px; font-weight: bold; cursor: pointer; padding-top: 1px; border-right: 1px solid #fff }
.level3 { background-color: #5e7d92; color: #fff; font-family : Tahoma, Arial; font-size: 12px; font-weight: bold; cursor: pointer; padding-top: 1px; border-right: 1px solid #fff }
.level4 { background-color: #496171; color: #fff; font-family : Tahoma, Arial; font-size: 12px; font-weight: bold; cursor: pointer; padding-top: 1px; border-right: 1px solid #fff }
#shimBorder { background-color: #93aaba; height: 128px; width: 3px; left: 0; top: 24px; position: relative; visibility: visible; border-left: 1px solid #fff; }
#tblBg { color: #666; font-size: 15px; font-family: arial; font-weight: bold; background-image: url(images/content_tbl_bg.gif); height: 22px; width: 156px; left: 12px; top: -288px; position: relative; visibility: visible; padding-top: 2px; }
#shimL1 { background-color: #93aaba; height: 96px; width: 8px; left: 4px; top: -72px; position: relative; visibility: visible; }
#shimL2 { background-color: #7399b3; height: 48px; width: 7px; left: 12px; top: -136px; position: relative; visibility: visible; }
#shimL3 { background-color: #5e7d92; height: 16px; width: 11px; left: 18px; top: -104px; position: relative; visibility: visible; }
#CnrRgt { background-image: url(images/content_cnr_rgt.gif); height: 23px; width: 12px; left: 156px; top: -22px; position: relative; visibility: visible; border-bottom: 1px solid #fff; }
#layer1 { background-color: #93aaba; text-indent: 16px; height: 15px; width: 175px; left: -8px; top: -22px; position: relative; visibility: visible; }
#layer2 { background-color: #93aaba; text-indent: 1px; height: 15px; width: 175px; left: 0; top: 1px; position: relative; visibility: visible; }
#layer7 { background-color: #496171; text-indent: 13px; height: 15px; width: 150px; left: 10px; top: 1px; position: relative; visibility: visible; }
#layer3 { background-color: #7399b3; height: 15px; width: 167px; left: 8px; top: 1px; position: relative; visibility: visible; }
#layer8 { background-color: #5e7d92; text-indent: 1px; height: 15px; width: 160px; left: -10px; top: 1px; position: relative; visibility: visible; }
#TblBgBot { background-image: url(images/content_tbl_bg_bot.gif); height: 23px; width: 156px; left: -7px; top: 1px; position: relative; visibility: visible; }
#layer4 { background-color: #7399b3; text-indent: 16px; height: 15px; width: 167px; left: 0; top: 1px; position: relative; visibility: visible; }
#layer5 { background-color: #7399b3; text-indent: 1px; height: 15px; width: 167px; left: 0; top: 1px; position: relative; visibility: visible; }
#layer6 { background-color: #595b5e; height: 15px; width: 160px; left: 7px; top: 1px; position: relative; visibility: visible; }
#CnrLftBot { background-image: url(images/content_cnr_lft_bot.gif); height: 23px; width: 12px; left: -12px; top: 0; position: absolute; visibility: visible; }
#CnrRgtBot { background-image: url(images/content_cnr_rgt_bot.gif); height: 23px; width: 12px; left: 156px; top: 0; position: relative; visibility: visible; }
--></style>
</head><body bgcolor="#bebebe">
<div id="cnrLft">
<div id="shimBorder"></div>
<div id="shimL1"></div>
<div id="shimL3"></div>
<div id="shimL2"></div>
<div id="tblBg">
<img src="images/maya.gif" alt="" width="19" height="20" align="absmiddle" border="0" hspace="1">Maya
<div id="CnrRgt"></div>
<div id="layer1" class="level1" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
BookStore
<div id="layer2" class="level1" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
<img src="images/menu_unplus.gif" alt="" width="11" height="9" border="0"> Downloads
<div id="layer3" class="level2" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
<img src="images/menu_plus.gif" alt="" width="11" height="9" border="0"> Mel Scripts
<div id="layer4" class="level2" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
Paint FX Brushes
<div id="layer5" class="level2" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
<img src="images/menu_unplus.gif" alt="" width="11" height="9" border="0"> Plugins
<div id="layer6" class="allLevelON" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
<img src="images/menu_unplus.gif" alt="" width="11" height="9" border="0"> Modeling
<div id="layer7" class="level4"onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
Curve Tools
<div id="layer8" class="level3" onmouseover="style.backgroundColor='#A0A0A4';" onmouseout="style.backgroundColor=''">
<img src="images/menu_plus.gif" alt="" width="11" height="9" border="0"> Rendering
<div id="TblBgBot">
<div id="CnrLftBot"></div>
<div id="CnrRgtBot"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
[edited by: createErrorMsg at 5:01 pm (utc) on Nov. 8, 2005]
[edited by: apockle at 5:04 pm (utc) on Nov. 8, 2005]
You will need to specify exactly which background-color you want to change by using "this":
<div id="layer1" onmouseover="[b]this.[/b]style.backgroundColor='#A0A0A4';" onmouseout="[b]this.[/b]style.backgroundColor='#f00';">
<div id="layer2" onmouseover="[b]this.[/b]style.backgroundColor='#aaa';" onmouseout="[b]this.[/b]style.backgroundColor='#0043ff';"></div>
i've updated the code (the one i'll use), it will be easiest to see what i want to do...
