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

Posted 2023-03-06

【中文标题】为啥 CSS 中的“光标：指针”效果不起作用

【英文标题】：Why is "cursor:pointer" effect in CSS not working为什么 CSS 中的“光标：指针”效果不起作用

【发布时间】：2013-08-28 09:10:00

【问题描述】：

我将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;

【问题讨论】：

从#firstdiv 中删除z-index:-2 并查看why you shouldn't just paste a link to your demo page。

奇怪地和我一起工作，会是z-index，这个故障发生在哪个浏览器中？ +1 @MarcelGwerder

【参考方案1】：

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

【讨论】：

batter ans is ==> : pointer-events: none;

@lalitbhakuni 这是不正确的，实际上阻止了光标完全改变......

【参考方案2】：

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

【讨论】：

Are you really talking and caring about IE 5/5.5?

或基于 IE5 的混合浏览器......就像在一些大公司中使用的那样。我真的为此被否决了3次！？真的没有留下深刻的印象，对 Stack Overflow 感到羞耻。

【参考方案3】：

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

【参考方案4】：

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

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

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

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

【讨论】：

在 OS X 的所有浏览器（chrome、safari、firefox）中都发生了这种情况。开始一个一个地关闭程序，直到我发现是在第二个屏幕上处于全屏模式的 Sublime Text 3 导致了这个问题的发生。但是，这个答案与原始问题无关。

我看到了这个备受赞誉的解决方案，并认为这是某种错误，因为另一个程序与我在浏览器中无法正常工作的 CSS 有什么关系。但是，果然，关闭 Photoshop（在我的例子中是 2022 版本）立即解决了这个问题。很高兴我在进入一个不必要的 CSS 调整兔子洞之前尝试了这个。

非常感谢，这一直困扰着我多年！关闭 Photoshop 有帮助！

【参考方案5】：

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

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

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

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

或者直接在元素中：

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

【讨论】：

pointer-events：自动修复光标指针，但不再触发点击时的预期动作

【参考方案6】：

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

【讨论】：

我认为这是故意的或至少是预期的行为，因为移动设备上没有光标，可能除了文本选择之外，这取决于操作系统，不确定您是否可以覆盖它。

我曾经在 chrome 中遇到过同样的问题（但在移动模拟器中没有）。所以我打开和关闭“移动模拟器”，chrome回到正确的阶段。 ;-D

【参考方案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;

【参考方案8】：

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

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

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

为我工作。

【参考方案12】：

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

而不是反斜杠：

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;

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

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

【参考方案13】：

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

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

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

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

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

【参考方案14】：

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

【参考方案15】：

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

【参考方案16】：

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

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

【参考方案17】：

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

::-webkit-scrollbar 
  display: none;

删除后，cursor: pointer 可以正常工作。