Mootools parents objekt change

Question

I'm looking for a solution for change CSS from a parent's object.

I have this:

<div class="layout">
   <div class="over"></div>
</div>
<div class="layout">
   <div class="over"></div>
</div>
<div class="layout">
   <div class="over"></div>
</div>
<div class="layout">
   <div class="over"></div>
</div>
<div class="layout">
   <div class="over"></div>
</div>

There are 6 Object like that on my site. So what I want is when I use mousenter event on the DIV over I want change backgroundcolor of the parent's "layout" not of every layout.

Nice would be if i can use morph() too.

Answer 1

To get the parent element you use getParent function. if you wish to bind this to something different you can change the function to function(e) and then use e.target.

The reason to cancel the animation if it's running is to remove some ugliness when moving the mouse around a bit to fast. You can try to remove it.

$$('.over')
.addEvent('mouseenter', function(){
    var parent = this.getParent();
    var tween = parent.get('tween');
    if (tween && tween.isRunning()){
        tween.cancel();
    }
    parent.setStyle('background-color', '#f00');
})
.addEvent('mouseleave', function(){
    this.getParent().tween('background-color', '#fff');
});

Here is a fiddle with a working example: http://jsfiddle.net/vxQXU/1/