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/

Mootools父母objekt改变

1 个答案: