Html 为什么 CSS 中的“cursor:pointer”效果不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18434626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is "cursor:pointer" effect in CSS not working
提问by You Chia Lai
HTML:
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:
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;
}
is a small part of my code. I set cursor:pointerfor .about>spanbut when the mouse hover on those texts in <span>, the cursor does not change in to pointer mode. I would like to know why it is not working. I am really new at html and css and this question may be dumb but plz help me. Thanks in advance.
是我代码的一小部分。我设置cursor:pointer为.about>span但是当鼠标悬停在 中的这些文本上时<span>，光标不会更改为指针模式。我想知道为什么它不起作用。我对 html 和 css 真的很陌生，这个问题可能很愚蠢，但请帮助我。提前致谢。
回答by ThinkingInBits
I messed with my css for hours, changing the positioning and z-index of just about every element on the page. I deleted every other element from the DOM except for the one with the cursor: pointer on hover, and it STILL didn't work.
我弄乱了我的 css 几个小时，改变了页面上几乎每个元素的定位和 z-index。我从 DOM 中删除了所有其他元素，除了带有光标的元素：悬停时的指针，但它仍然不起作用。
For me, on Mac OSX El Captain V 10.11, the issue had to do with some sort of interference with Photoshop CC. Once I closed photoshop, the cursor started working again.
对我来说，在 Mac OSX El Captain V 10.11 上，问题与对 Photoshop CC 的某种干扰有关。关闭photoshop后，光标再次开始工作。
Solution for me:Close and reopen photoshop
我的解决方案：关闭并重新打开 photoshop
回答by Sj.
Short answer is that you need to change the z-index so that #firstdiv is considered on top of the other divs.
简短的回答是您需要更改 z-index，以便在其他 div 之上考虑 #firstdiv。
回答by 0xcaff
cursor:pointerdoesn't work when you're using Chrome's mobile emulator.
cursor:pointer当您使用 Chrome 的移动模拟器时不起作用。
回答by Shadow Wizard is Ear For You
Just happened to me, and in my case it was due to a CSS rule pointer-events: none;which was set on a parent element and I forgot about it.
刚刚发生在我身上，在我的情况下，这是由于pointer-events: none;在父元素上设置的 CSS 规则而我忘记了它。
This caused any pointer events to be just ignored, which includes the cursor.
这导致任何指针事件都被忽略，包括光标。
To fix this, you can just set the style to allow pointer events:
要解决此问题，您只需设置样式以允许指针事件：
.about>span{
cursor:pointer;
pointer-events: auto;
}
Or directly in the element:
或者直接在元素中：
<span style="pointer-events: auto;">...</span>
回答by H2ONOCK
Also add cursor:hand. Some browsers need that instead.
还要添加光标：手。一些浏览器需要它。
回答by Brad Peabody
It works if you remove position:fixedfrom #firstdiv- but @Sj is probably right as well - most likely a z-index layering issue.
如果您position:fixed从中删除它会起作用#firstdiv- 但@Sj 可能也是正确的 - 很可能是 z-index 分层问题。
回答by JuZDePeche
I had this issue using Angular and SCSS. I had all my CSS nested so I decided to remove cursor: pointer;out of it. And it worked.
我在使用 Angular 和 SCSS 时遇到了这个问题。我的所有 CSS 都嵌套了，所以我决定将其删除cursor: pointer;。它奏效了。
Example:
例子：
.container{
.Approved{
color:green;
}
.ApprovedAndVerified{
color:black;
}
.lock_button{
font-size:35px;
display:block;
text-align:center;
}
}
.lock_button{
cursor:pointer;
}
回答by Rijo
I have the same issue, when I close the chrome window popup browser inspector its working fine for me.
我有同样的问题，当我关闭 chrome 窗口弹出浏览器检查器时，它对我来说工作正常。
回答by Thomas
position: relative;
z-index: 2;
cursor: pointer
worked for me.
为我工作。
回答by Lukas Owen
The problem in my case was that the :afterblocked mouse events, so I had to add pointer-events: none;to my :afterblock.
我的问题是被:after阻止的鼠标事件，所以我不得不添加pointer-events: none;到我的:after块中。
