为什么 CSS 中的“光标：指针”效果不起作用

我把我的 css 弄乱了几个小时，改变了页面上几乎每个元素的位置和 z-index。我从 DOM 中删除了所有其他元素，除了带有光标的元素：悬停时的指针，它仍然不起作用。

对我来说，在 Mac OSX El Captain V 10.11 上，问题与对 Photoshop CC 的某种干扰有关。关闭 Photoshop 后，光标又开始工作了。

我的解决方案：关闭并重新打开 Photoshop

显然，这可能是由于许多不同的程序，包括 Photoshop、Sketch、DataGrip、Acrobat、Sublime Text 等而发生的。

---

您需要更改 z-index 以便将 #firstdiv 考虑在其他 div 之上。

---

刚刚发生在我身上，就我而言，这是由于在父元素上设置的 CSS 规则 pointer-events: none; 而我忘记了它。

这导致任何指针事件都被忽略，包括光标。

要解决此问题，您只需将样式设置为允许指针事件：

.about>span{
    cursor:pointer;
    pointer-events: auto;
}

或者直接在元素中：

<span style="pointer-events: auto;">...</span>

---

当您使用 Chrome 的移动模拟器时，cursor:pointer 不起作用。

https://i.stack.imgur.com/yNpBf.png

---

还添加光标：手。有些浏览器需要它。

---

position: relative;
z-index: 2;
cursor: pointer

为我工作。

---

在过去的几个小时里，我一直在摸索为什么我的 CSS 不起作用！我试图将 row-resize 显示为光标，但它显示的是默认光标，但 s-resize 浏览器显示的是正确的光标。我尝试更改 z-index 但这也没有解决我的问题。

因此，在从互联网上尝试了更多解决方案之后，我打电话给我的一位同事并通过 Google meet 分享了我的屏幕，他告诉我，当我看到默认图标时，他看到了行调整大小图标！！！他甚至给我发了我的截屏截图。

因此，经过进一步调查，我发现当我使用远程桌面连接连接到我的办公室 PC 时，由于某种原因 RDC 没有显示某种类型的光标。

这是我在远程 PC 上看不到的光标列表，

none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,

---

如果您从 #firstdiv 中删除 position:fixed 它会起作用 - 但@Sj 可能也是正确的 - 很可能是 z-index 分层问题。

---

我在使用 Angular 和 SCSS 时遇到了这个问题。我的所有 CSS 都嵌套了，所以我决定从中删除 cursor: pointer;。它奏效了。

例子：

.container{
  .Approved{
    color:green;
  }

  .ApprovedAndVerified{
    color:black;
  }

  .lock_button{
    font-size:35px;
    display:block;
    text-align:center;
  }
}

.lock_button{
  cursor:pointer;
}

---

我的问题是 :after 阻止了鼠标事件，所以我必须将 pointer-events: none; 添加到我的 :after 块中。

---

我有同样的问题，当我关闭 chrome 窗口弹出浏览器检查器时，它对我来说工作正常。

---

对我有用的解决方案是在从本地目录“呼出”时使用正斜杠而不是反斜杠。

而不是反斜杠：

光标: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;

我将其更改为正斜杠：

cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;

这个关于反斜杠和正斜杠的行为可能可以在这个 StackOverflow 答案中解释：Strange backslash and behavior in CSS

---

我的问题是错误地使用了 cursor: 'pointer' 而不是 cursor: pointer。因此，请确保您没有在指针周围添加单引号或双引号。

---

对我来说，问题是我在全球范围内设置了这个：

::-webkit-scrollbar {
  display: none;
}

删除它后，cursor: pointer 按预期工作。

---

删除父 z-index 值为我解决了这个问题。

---

无论你做什么，光标都不会改变，除非你将样式设置为 :hover

除了您已经拥有的元素类之外，这还需要如下所示。

.about > span:hover {
    cursor:pointer;
}

---

我找到了解决方案：如果没有其他帮助，请使用 :hover 和 cursor: pointer。

---

阻止用户选择文本，然后使用 curser:pointer 属性 -

.targeted-span{
user-select: none;
curser : pointer;}

---

将元素定位为相对，然后使用 z-index

.menu-toggle{ 
    display: block; 
    width: 40px; 
    height: 40px; 
    border:2px solid white; 
    border-radius: 5px; 
    margin: 15px; 
    float: right; 
    cursor: pointer; 
    text-align: center; 
    font-size: 30px; 
    color: var(--light-bg-color); 
    z-index: 10; 
}

---