Electron中-webkit-app-region: drag与hover兼容问题求助

当给元素添加-webkit-app-region: drag后，Electron会将该区域标记为窗口拖拽区，浏览器原生的鼠标事件（hover、mouseenter等）会被窗口管理器拦截，导致交互失效。要同时保留拖拽和hover效果，最稳妥的方案是嵌套元素分层处理：

• 外层容器设置-webkit-app-region: drag，负责窗口拖拽功能
• 内层元素设置-webkit-app-region: no-drag，恢复鼠标事件响应，实现hover等交互

代码示例 #

HTML结构

<div class="drag-wrapper">
  <div class="hoverable-content">
    拖拽我移动窗口，hover我会变色
  </div>
</div>

CSS样式

.drag-wrapper {
  -webkit-app-region: drag;
  width: 200px;
  height: 60px;
  border: 1px solid #eee;
  /* 外层容器的布局样式按需调整 */
}

.hoverable-content {
  -webkit-app-region: no-drag;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.hoverable-content:hover {
  background-color: #e6f7ff;
  cursor: pointer; /* 可选，提示可交互 */
}

额外说明 #

• 内层元素的尺寸建议和外层容器一致，确保整个拖拽区域都能触发hover效果
• 如果是自定义标题栏场景，这种方法同样适用：把标题栏整体设为drag容器，里面的最小化、关闭按钮等单独设为no-drag，既不影响窗口拖拽，也能正常操作按钮

内容的提问来源于stack exchange，提问作者Rodrigo Carvalho