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

我为 .about > span设置了 cursor: pointer，但是当鼠标悬停在 <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;
}
173810 次浏览
小开
最佳答案

You need to change the z-index so that #firstdiv is considered on top of the other divs.

小开

Also add cursor:hand. Some browsers need that instead.

小开

It works if you remove position:fixed from #firstdiv - but @Sj is probably right as well - most likely a z-index layering issue.

小开

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.

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.

Solution for me: Close and reopen Photoshop

Apparently this can happen due to many different programs including Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.

小开

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.

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>
小开

cursor:pointer doesn't work when you're using Chrome's mobile emulator.

enter image description here

小开

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.

Example:

.container{
.Approved{
color:green;
}


.ApprovedAndVerified{
color:black;
}


.lock_button{
font-size:35px;
display:block;
text-align:center;
}
}


.lock_button{
cursor:pointer;
}
小开

Position the element as relative and then use 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;
}
小开

The problem in my case was that the :after blocked mouse events, so I had to add pointer-events: none; to my :after block.

小开

I have the same issue, when I close the chrome window popup browser inspector its working fine for me.

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

worked for me.

小开

The solution that worked for me is using forward slash instead of backslash when 'calling' out from a local directory.

instead of backslash:

cursor: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;
Note: When I use backslash I am getting a net::ERR_FILE_NOT_FOUND

I changed it to forwardslash:

cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;
Note: When I use forward slash, the custom cursor style executes successfully.

This behavior regarding backslashes and forward slashes could probably be explained in this StackOverflow answer: Strange backslash and behavior in CSS

小开

For the last few hours, I was scratching my head why my CSS wasn't working! I was trying to show row-resize as cursor but it was showing the default cursor but for s-resize browser was showing the correct cursor. I tried changing z-index but that also didn't solve my problem.

So after trying few more solutions from the internet, I called one of my co-workers and shared my screen via Google meet and he told me that he was seeing the row-resize icon when I was seeing the default icon!!! He even sent me the screenshot of my screencast.

So after further investigation, I found out the as I was using Remote Desktop Connection to connect to my office PC, for some reason RDC doesn't show some type of cursors.

Here is the list of cursor's I couldn't see on my remote PC,

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

小开

My problem was using cursor: 'pointer' mistakenly instead of cursor: pointer. So, make sure you are not adding single or double quotes around pointer.

小开

I found a solution: use :hover with cursor: pointer if nothing else helps.

小开

Prevent user from selecting text, then use curser:pointer property -

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

For me, the issue was that I had this set globally:

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

After removing this, cursor: pointer works as expected.

小开

Remove parent z-index value fixed the issue for me.

小开

Whatever you do, the cursor will not change unless you set the style against :hover

this needs to be as follows, in addition to the class you already have for the elements.

.about > span:hover {
cursor:pointer;
}

提交答案