首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有关mouseout事件的问题

有关mouseout事件的问题
EN

Stack Overflow用户
提问于 2018-05-29 06:17:29
回答 2查看 0关注 0票数 0

我使用JavaScript来隐藏图片并显示隐藏在其下的一些文字。但是,如果在滚动显示文本时显示文本,它会触发容器上的鼠标移出事件,然后隐藏文本并再次显示图像,并且它会进入一个奇怪的循环。

这个html看起来像这样:

代码语言:javascript
复制
<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):

代码语言:javascript
复制
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;
}
EN

Stack Overflow用户

发布于 2018-05-29 14:55:47

我会给容器div:

代码语言:javascript
复制
position: relative;

并在容器中添加第三个div(应该是容器的最后一个孩子):

代码语言:javascript
复制
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

然后捕获此div上的mouseover和mouseout事件。

因为它没有子元素,所以不应该让spurious mouseover和mouseout事件传播给它。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100000126

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档