javascript - 将指针快速移出窗口时，元素保持悬停状态

Question

我正在开发一个使用 openfin 和 React 的应用程序。它是一个包含多个元素的工具栏。我有一个靠近边缘的地方，当用户将指针悬停在它上面时需要更改其背景颜色。问题是向左或向上/向下(以及离开窗口)的快速移动会使元素处于悬停状态。

我试过使用 javascript，但是 onmouseout 有同样的问题。奇怪的是，我在同一个工具栏中有几个包含图像的元素没有这个问题。

有什么想法吗？

编辑: HTML/JSX:

<div>
    <Component1 /> // 80x80-ish
    <MyComponent /> // 20x80-ish wxh
    <OtherComponents />
</div>

MyComponent 是一个正在运行的组件。 css 只是更改组件最外层 div 上的 :hover 上的 background-color。抱歉，我不能说得很具体。

现在组件与窗口的边缘齐平(没有边框或任何东西)。我想我可能需要在那里添加几个像素。

Edit2: 刚刚注意到 Component1 有 webkit-app-region: drag。这导致了这个问题，因为从常规元素移动到那个元素时，MouseOut 并不总是触发。

我通过缩小组件解决了这个问题，这样 MouseOut 就有了一些触发空间(5px 就足够了)。

Answer 1

试试这个

  $('#element').hover(function() {
  $(this).css({'background':'red'});
   }, function() {
   $(this).css({'background':'none'});
   }) ;

希望对你有帮助...