I found what looks like might be a solution, but I could sure use some
help because I don't fully understand how to put it together with the
right syntax in plain-old JQuery without any extension. Here's the
thread describing the same problem and posting the solution:
http://www.extjs.com/forum/archive/index.php/t-16545.html
The last post in the thread contains the solution using "within."
Never heard of it and can't find it in the reference. Below is the
code that was posted to correctly deal with nested elements on a
mouseover().
I could use some help putting this together in the right syntax for my
app, which does not use any extension:
Thanks, Tim! That solved the problem!
For the record, the solution is to use the within function to detect
if an element is within another element. The corrected function should
read:
Ext.get('outsideDiv').on('mouseout', function(e, el) {
if(!e.within(Ext.get('outsideDiv'), true)){
Ext.get('outsideDiv').setDisplayed('none');
}
});
The entire example with the correct mouseout function is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="javascript/extjs/
resources/css/ext-all.css">
<script type="text/javascript" src="javascript/extjs/adapter/ext/ext-
base.js"></script>
<script type="text/javascript" src="javascript/extjs/ext-all-
debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('outsideDiv').on('mouseout', function(e, el) {
if(!e.within(Ext.get('outsideDiv'), true)){
Ext.get('outsideDiv').setDisplayed('none');
}
});
});
</script>
<style type="text/css">
.menu {
border: 1px solid #CCC;
text-align: left;
display:block;
position:absolute;
top:100px;
left:100px;
width: 100px;
background-color:white;
padding:20px;
}
</style>
</head>
<body>
<div id="outsideDiv" class="menu">
<p>item 1</p>
<p>item 2</p>
</div>
</body>
</html>
On Oct 30, 10:27 am, jmatthews <jmatth...@xexam.net> wrote:
> Interesting, and I can't imagine this hasn't been dealt with already!
>
> If you have nested <divs>, the mouseover on the outside <div>
> prohibits you from setting a different mouseover() on the inside
> <div>.
>
> Like this:
>
> <div id="parent">Parent
> <div class="child">Child</div>
> </div>
>
> If you instruct $("#parent").css("color","blue"), it will color both
> Parent and Child blue.
>
> If you set a separate color in CSS for class="child, the separate
> color will override and work for the child because it is more
> proximate, according to proper CSS methodolgy.
>
> However, the mouseover() and mouseout() properties will NOT work for
> only class="child", if you try to define these methods for only the
> children. Instead, you can mouseover any child in the list, and it
> will render its STYLES on the parent, even though the STYLES were
> overridden AND REMAIN SUPPRESSED for the child.
>
> The same is NOT true for mouseover(). And this rule applies to BOTH
> Jquery and HTML DOM!
>
> I don't know why, but can anyone help?
