Mootools的父母对象改变

Question

我正在寻找一个解决方案，从父母的对象改变CSS。

我有这样的：

<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> 

有6个对象一样，在我的网站。 所以我想要的是，当我在DIV上使用mousenter事件over 我想更改backgroundcolor父母的“布局”，而不是每个布局。

不错，如果我也可以使用morph()。

Answer 1

获取使用getParent函数的父元素。如果您希望将其绑定到不同的地方，您可以将该功能更改为function(e)，然后使用e.target。

如果动画正在运行，取消动画的原因是在将鼠标移动一点时快速消除一些丑陋。你可以尝试删除它。

$$('.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'); 
}); 

这里是工作示例小提琴：http://jsfiddle.net/vxQXU/1/