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

HTML：

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，但是当鼠标悬停在中的这些文本上时，光标不会变为指针模式。 我想知道为什么它不起作用。 我真的是html和CSS的新手，这个问题可能很愚蠢，但是请帮助我。 提前致谢。

You Chia Lai asked 2020-06-24T18:13:01Z

10个解决方案

277 votes

我花了数小时弄乱了CSS，改变了页面上几乎每个元素的位置和z-index。 我从DOM中删除了其他所有元素，除了带有cursor：指针的元素之外，它仍然无法正常工作。

对我而言，在Mac OS X El Capitan V 10.11上，问题与对Photoshop CC的某种干扰有关。 关闭Photoshop后，光标再次开始工作。

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

ThinkingInBits answered 2020-06-24T18:13:45Z

64 votes

简短的答案是，您需要更改z索引，以便将#firstdiv视为其他div的顶部。

Sj. answered 2020-06-24T18:13:16Z

18 votes

当您使用Chrome的移动模拟器时，cursor:pointer无法正常工作。

0xcaff answered 2020-06-24T18:14:05Z

9 votes

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

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

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

.about>span{

cursor:pointer;

pointer-events: auto;

}

或直接在元素中：

...

Shadow answered 2020-06-24T18:14:38Z

7 votes

还要添加cursor：hand。 某些浏览器需要它。

H2ONOCK answered 2020-06-24T18:14:59Z

2 votes

如果您从#firstdiv中删除position:fixed，则可以使用-但@Sj也可能是正确的-最有可能是z索引分层问题。

Brad Peabody answered 2020-06-24T18:15:19Z

1 votes

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

}

JuZDePeche answered 2020-06-24T18:15:43Z

0 votes

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

Lukas Owen answered 2020-06-24T18:16:04Z

0 votes

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

Rijo answered 2020-06-24T18:16:24Z

-1 votes

将元素定位为相对，然后使用z-index，它对我有用:)

Ichigo Kurosaski answered 2020-06-24T18:16:44Z