更改电子中可拖动区域的光标

Posted 2023-03-22

【中文标题】更改电子中可拖动区域的光标

【英文标题】：Change Cursor on Draggable region in Electron

【发布时间】：2018-04-14 07:16:26

【问题描述】：

我正在使用 Electron 制作应用程序，并且我有一个无框窗口，我有一些顶部区域到 -webkit-app-region: drag，但是当我这样做时，不会改变。

显然它在这个 sn-p 中是不可拖动的，因为它不是一个电子应用程序，但基本上光标不会在可拖动的元素上改变。

编辑：似乎尝试更改任何webkit 样式上的光标根本不起作用，因为我也尝试更改滚动条上的光标。有什么解决办法吗？我用谷歌搜索了它，但没有找到合适的。

#draggable 
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;

#draggable:hover 
  cursor: grab;

<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

【问题讨论】：

铬相关问题bugs.chromium.org/p/chromium/issues/…

【参考方案1】：

不幸的是，设置 -webkit-app-region: drag; 会禁用所有单击和鼠标事件，因为它被视为标题栏，因此您无法更改光标。

我会附上我读到的地方，但我再也找不到了。

见：

#1354 -webkit-app-region: 拖动会吃掉所有点击事件

#8730 Frameless Electron App 不工作 css cursor:pointer

【讨论】：

那太糟糕了，希望他们有一天会更新它以工作？

也许吧，但我不这么认为，因为他们把这个问题作为一个不会修复的问题解决了