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

Question

我设置cursor: pointer为.about > span，但是当我的鼠标悬停在中的这些文本上时<span>，光标不会变为指针模式。我想知道为什么它不起作用。

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;
}

score 397 · Accepted Answer

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

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

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

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

score 112 · Accepted Answer

112

您需要更改 z-index 以便将#firstdiv其置于其他 div 之上。

于 2013-08-25T23:13:32.420 回答

score 36 · Accepted Answer

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

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

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

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

或者直接在元素中：

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

score 35 · Accepted Answer

35

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

于 2017-06-13T00:00:17.300 回答

score 6 · Accepted Answer

6

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

于 2013-08-25T23:14:21.627 回答

score 2 · Accepted Answer

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

score 2 · Accepted Answer

2

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

为我工作。

于 2020-02-08T00:24:52.407 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

我的问题是被:after阻止的鼠标事件，所以我不得不添加pointer-events: none;到我的:after块中。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

而不是反斜杠：

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 答案中解释：奇怪的反斜杠和 CSS 中的行为

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

-1

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

于 2020-10-30T21:37:59.557 回答

score -1 · Accepted Answer

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

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

score -2 · Accepted Answer

将元素定位为相对，然后使用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; 
}

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

17 回答 17

Related

Reference