Question

HTML：

     <div id="firstdiv">
          <div id="intro">
              <h1 id="name">YOU CHIA LAI</h1>
                  <ul>
                      <li class="about">I am a Master of <span>Architecture</span>  
                       candidate at Rice University.  
                      </li>
                      <li class="about">I am also interested in <span>photography</span> &        
                      <span>web design</span>.</li>
                      <li class="about">I wish you can know more <span>about</span> me.
                      </li>
                 </ul>
          </div>
      </div>

CSS：

#firstdiv{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100%;
    width:100%;
    margin:auto;
    background:#E6E6E6;
    text-align:center;
    font-size:0;
    z-index:-2
}
.about>span{
    cursor:pointer;
    font-family:Eurofurence Light;
    padding:0 0 3px 0;
    color:#01DFA5;
}

是我代码的一小部分。我为cursor:pointer设置.about>span但是当鼠标悬停在<span>中的那些文本上时，光标不会更改为指针模式。我想知道它为什么不起作用。我是html和css的新手，这个问题可能很愚蠢但plz帮助我。提前谢谢。

Answer 1

我和我的css搞砸了几个小时，改变了页面上每个元素的定位和z-index。我删除了DOM中的所有其他元素，除了带有光标的那个元素：悬停时指针，它仍然无效。

对我来说，在Mac OSX El Captain V 10.11上，问题与Photoshop CC的某些干扰有关。一旦我关闭了photoshop，光标就再次开始工作了。

我的解决方案：关闭并重新开启photoshop

Answer 2

简短回答是你需要改变z-index，以便#firstdiv被认为是在其他div之上。

Answer 3

还添加光标：手。有些浏览器需要这样做。

Answer 4

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

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

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

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

或直接在元素中：

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

Answer 5

当您使用Chrome的移动模拟器时，

cursor:pointer无法正常工作。

Answer 6

如果您从position:fixed删除#firstdiv，它就有效 - 但@Sj可能也是正确的 - 很可能是z-index分层问题。

Answer 7

我在使用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;
}

Answer 8

common-stuff.js

为我工作。

Answer 9

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

而不是反斜杠：

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

注意：当我使用反斜杠时，我得到的是net :: ERR_FILE_NOT_FOUND

我将其更改为正斜杠：

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

注意：使用正斜杠时，自定义光标样式将成功执行。

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

Answer 10

在过去的几个小时中，我一直在挠挠为什么CSS无法正常工作！我试图将row-resize显示为光标，但是它显示的是默认光标，但是对于s-resize，浏览器显示的是正确的光标。我尝试更改z-index，但这也不能解决我的问题。

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

因此，在进一步调查之后，我发现使用远程桌面连接来连接到我的办公室PC时，出于某种原因RDC不会显示某种类型的游标。

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

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

Answer 11

我在 Google Maps Api 上遇到了一个相关问题，在您移动鼠标之前，更改指针是不可见的。也许关闭另一个应用也有类似的效果。

Answer 12

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

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

Answer 13

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

Answer 14

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

Answer 15

当我关闭Chrome窗口弹出式浏览器检查器时，我遇到了同样的问题。

Answer 16

在我的情况下，问题是:after阻止了鼠标事件，因此我不得不在pointer-events: none;块中添加:after。

Answer 17

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

为什么CSS中的“cursor：pointer”效果不起作用

17 个答案: