object - 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 个这样的对象。所以我想要的是当我mousenter在 DIV 上使用事件时，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/