我正在使用 JavaScript 隐藏图像并显示隐藏在其下方的一些文本。但是,当您滚动显示文本时,它会触发容器上的 mouseout 事件,然后隐藏文本并再次显示图像,然后它就会进入一个奇怪的循环。
html 看起来像这样:
<div onmouseover="jsHoverIn('1')"
onmouseout="jsHoverOut('1')">
<div id="image1" />
<div id="text1" style="display: none;">
<p>some content</p>
<p>some more content</p>
</div>
</div>
和 javascript(它使用 scriptaculous):
function jsHoverIn(id) {
if(!visible[id]) {
new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
visible[id] = true;
}
}
function jsHoverOut (id) {
var scope = Effect.Queues.get(id);
scope.each(function(effect) { effect.cancel(); });
new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
visible[id] = false;
}
这看起来很简单,但我就是无法理解它。
我会给容器 div:
position: relative;
并在容器中添加第三个 div(应该是容器的最后一个子元素):
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
并捕获此 div 上的 mouseover 和 mouseout 事件。
因为它没有子元素,所以您不应该将虚假的 mouseover 和 mouseout 事件传播到它。
Edit:
我认为发生的情况是,当光标从父元素移动到子元素上时,父元素上会发生 mouseout 事件,子元素上会发生 mouseover 事件。但是,如果子元素上的鼠标悬停处理程序没有捕获该事件并停止其传播,则父元素也将接收鼠标悬停事件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)