Why is "cursor:pointer" effect in CSS not working

Question

I set cursor: pointer for .about > span, but when my mouse hovers on those texts in <span>, the cursor does not change into pointer mode. I would like to know why it is not working.

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

Solution 1

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

Solution 2

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.

Solution 3

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>

Solution 4

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

Solution 5

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

View more solutions

Comments

[Marcel Gwerder]

Remove z-index:-2 from #firstdiv and have a look at why you shouldn't just paste a link to your demo page.

[Guilherme Nascimento]

Strangely worked with me, would be something with z-index, in which browser this failure happens? +1 for @MarcelGwerder

[Bogomip]

The answer below fixed this for me, but closing and reopening chrome.

[Marcel Gwerder]

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

[H2ONOCK]

Or hybrid browsers which have been based around IE5...like used in some large companies. Have I really been voted down 3 times for this!? Not impressed really, shame on Stack Overflow.

[eballeste]

This was happening to me in all browsers in OS X (chrome, safari, firefox). Started closing programs, one by one, until I found out that it was Sublime Text 3 in full-screen mode on a second screen that was causing this issue to happen. This answer, however, has nothing to do with original question.

[Kasapo]

I believe that's intentional or at least expected behavior as there is no cursor on a mobile device, except perhaps for text selection and that's OS dependent and not sure you can override that.

[Kyle Burkett]

pointer-events: auto fixed the cursor pointer, but it no longer triggers the expected action on click

[lalit bhakuni]

batter ans is ==> : pointer-events: none; <=== not need to Z-index

[Rzassar]

I had the same issue once in chrome (But not in mobile emulator). So i turn "mobile emulator" on and off and chrome get back to the right stage. ;-D

[Jacques Mathieu]

@lalitbhakuni that is incorrect and actually prevents the cursor from changing altogether...

[MT3]

I saw this highly-upvoted solution and thought it was some kind of mistake because what does another program have to do with my CSS in the browser not working correctly. But, sure enough, closing Photoshop (2022 version in my case) immediately resolved the issue. Glad I tried this before going down an unnecessary CSS tweaking rabbit hole.

[Stephan Wagner]

Thank you so much, this has been bugging me for years! Closing Photoshop helped!

[BobbyMick]

I had the same issue right now with all my browsers, and Photoshop was the culprit! Terrible coding from Adobe! Thanks for submitting this answer, as it was driving me round the bend!

[p_mcp]

In all my years of coding, this is the weirdest bug I've ever encountered. Thanks for the fix!

[Marcos Buarque]

Whoaaa! I can't believe this! Same here, I resolved the problem by closing Photoshop (thank you for this hint, it really saved me a ton of time!). Just an additional piece of information on top of your comment: the issue is happening on June 2022 with Photoshop 23.3.1, and Google Chrome 102.0.5005.61 on a MacOS Monterey 12.4. After closing and reopening Photoshop, the problem doesn't show again.

[Botond Kopacz]

Can't believe this is still a bug in 2022. I can confirm that closing and re-opening Photoshop solved the issue on Macbook Pro (M1 chip)