我有一个div,当我将鼠标悬停在它上面时,我有一个子div(另一个div)要进行动画处理,但是当我将鼠标悬停在子div上时,父div会失去焦点,并且子元素会开始动画回来,就像我离开一样父级 div。
这是我正在使用的代码:
$$(".slide .item").each(function (element) {
element.observe('mouseover', function (event) {
element.writeAttribute('doing_animation', 'true');
element.down('.meta').morph('margin: 103px 0 0;', {
duration: 0.25,
afterFinish: function (event) {
element.writeAttribute('doing_animation', 'false');
}
});
});
element.observe('mouseout', function (event) {
setTimeout(function () {
element.down('.meta').morph('margin: 169px 0 0;', {
duration: 0.25
});
}, 250);
});
});
这是标记:
<div class="item">
<div class="meta">
<h3><a href="#">Space Kitty Needz Moar Balls</a></h3>
<ul>
<li>From: <a href="#">Jeffdoe</a></li>
<li>Posted: 20 minutes ago</li>
<li>Views: 249,209</li>
</ul>
</div>
<img src="images/tmp/kitty.png" alt="" />
</div>
因此,对于代码,我想将鼠标悬停在 .item
或 .item .meta
上,并且 .meta
div 仍将控制焦点.item
div 的。我知道 jQuery 在这方面做得更好,但我需要使用 Prototype。
谢谢!
最佳答案
我的做法是这样的:
$$(".slide .item").each(function (element) {
element.observe('mouseover', function (event) {
var relatedTarget = $(event.relatedTarget || event.fromElement);
var target = Event.element(event);
if ((target == element || Element.descendantOf(target, element))
&& !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
{
element.writeAttribute('doing_animation', 'true');
element.down('.meta').morph('margin: 103px 0 0;', {
duration: 0.25,
afterFinish: function (event) {
element.writeAttribute('doing_animation', 'false');
}
});
}
});
element.observe('mouseout', function (event) {
var relatedTarget = $(event.relatedTarget || event.fromElement);
var target = Event.element(event);
if ((target == element || Element.descendantOf(target, element))
&& !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
{
setTimeout(function () {
element.down('.meta').morph('margin: 169px 0 0;', {
duration: 0.25
});
}, 250);
}
});
});
你可以看到我刚刚添加了一个包装器
var relatedTarget = $(event.relatedTarget || event.fromElement);
var target = Event.element(event);
if ((target == element || Element.descendantOf(target, element))
&& !((relatedTarget == element) || Element.descendantOf(relatedTarget, element)))
{
...
}
围绕你的事件处理程序。因此,只有当我们确实移入或移出父容器时,才将其视为“真正的”鼠标移入或鼠标移出。
希望有帮助。
关于javascript - 将子元素悬停在原型(prototype)中时失去对父元素的焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1132487/