Menu
I’ve got a use control box in the upper left corner of my app that contains 3 user controls (two text boxes, one combobox). I’m trying to get this control to fade when the mouse is not hovering over it and to be fully visible when the mouse is hovering over it.
I can connect to the <div>’s onmouseover and onmouseout events just fine and manipulate the <div>’s opacity easily as well. The problem comes when I’m hovering inside the <div>, and then hover over one of the user controls contained within the <div>, the control box fades as the user control’s onmouseover is fired which in turn fires the control <div>’s onmouseout.
In short: when hovering over controlsPane, I want the div to be completely visible, when the mouse is not hovering over the controlsPane it should be transparent.
Simplified HTML:
[CODE]
<div id=”controlsPane”>
<div><input id=”InputFeet”></input> ft
</div>
<div><input id=”InputMeters”></input> m
</div>
<div><input id=”InputDatum”></input>
</div>
</div>
I’m using the dojo toolkit here, but the issue exists in plain JS, so… for what it’s worth, here’s my dojo event code:
[CODE]
ControlMouseOver = dojo.connect(controlsPane, “onmouseover”, function(event){
if(event.target == controlsPane) dojo.style(controlsPane,{opacity:”1″});
dojo.stopEvent(event);
});
ControlMouseOut = dojo.connect(controlsPane, “onmouseout”, function(event){
if(event.target == controlsPane) dojo.style(controlsPane,{opacity:”0.3″});
dojo.stopEvent(event);
});