当前位置：文江博客话题详情

任何人都知道用键盘滚动时触发的鼠标悬停技巧/替代方案

发布于 2024-07-24 18:40:21 字数 256 浏览 7 评论 0原文

是否有替代方法或悬停方法的技巧，可以在用户滚动页面时光标从一个 div 移动到另一个 div 时触发一个功能。

我在当前帖子 div 的悬停事件上使用一些 javascript (jQuery) 有点让它工作。但是，我注意到悬停事件仅在鼠标实际移动时才会触发。如果使用键盘（页面）向上/向下滚动页面，则不会触发。

（我可以注意到，例如 soup.io 已经找到了一种方法来实现这一点，但我找不到他们是如何做到的）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有影子陪我不离不弃 2024-07-31 18:40:21

不幸的是，它相当复杂；您不能再依赖 onMouseOver 事件 - 页面滚动时触发的唯一事件是 onScroll 。涉及的步骤：

遍历元素，将每个元素的宽度、高度和偏移量（距屏幕左侧/顶部的距离）存储在数组中。
当 onScroll 事件被触发时，检查光标针对所有选定元素的最后已知位置（遍历数组） - 如果光标位于其中一个元素上，则调用处理程序。

快速（不可靠）原型：http://pastie.org/507589

回复收藏 0 原文

家住魔仙堡 2024-07-31 18:40:21

你有样品吗？我猜测页面上元素的布局阻止了 mouseover 事件。我下面的简单示例按照您的描述工作。当光标位于页面顶部并使用键盘导航时，将触发 mouseover 事件。

<html>
<body>
<script>
function log(text)
{
    document.getElementById('logger').value += text + "\n";
}
</script>

<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>

Do you have a sample? I'm guessing that the layout of the elements on the page are blocking the mouseover event. My simple example below works as you described it should. With the cursor at the top of the page and using keyboard navigation, the mouseover events are fired.

<html>
<body>
<script>
function log(text)
{
    document.getElementById('logger').value += text + "\n";
}
</script>

<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>

回复收藏 0 原文

还如梦归 2024-07-31 18:40:21

您正在寻找鼠标滚轮事件。

document.getElementById('myDiv').onmousewheel = function() {
  alert('You win!');
  alert('Seriously! It's just like that');
};

我只在 Chrome (webkit) 中测试过这个

You're looking for the mousewheel event.

document.getElementById('myDiv').onmousewheel = function() {
  alert('You win!');
  alert('Seriously! It's just like that');
};

I only tested this in Chrome (webkit)

回复收藏 0 原文

~没有更多了~

关于作者

孤千羽

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

任何人都知道用键盘滚动时触发的鼠标悬停技巧/替代方案

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

任何人都知道用键盘滚动时触发的鼠标悬停技巧/替代方案

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。