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

Element stays in hover state when moving the pointer quickly out of the window

本文关键字：悬停 状态 窗口 移出 指针 元素      更新时间：2023-09-26

我正在制作一个使用openfin和react的应用程序。它是一行中包含多个元素的工具栏。我有一个靠近边缘的，当用户将指针悬停在它上面时，需要改变它的背景颜色。问题是，快速移动到左边或上/下(和窗外)会使元素处于悬停状态。

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

任何想法?

编辑: HTML/JSX: 

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

MyComponent是出错的那个。css只是在组件最外层的div上改变background-color上的:hover。对不起，我不能说得很具体。

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

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

我通过缩小组件来修复问题，因此MouseOut有一些空间可以触发(在我的情况下5px就足够了)。

试试这个

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

希望它能帮助…

相关文章：