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

Answer 1

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

Answer 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.

Answer 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>

Answer 4

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

Answer 5

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

Answer 6

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

worked for me.

Answer 7

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,

Answer 8

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

Answer 9

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

Answer 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.

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

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

After removing this, cursor: pointer works as expected.

Answer 15

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

Answer 16

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

Answer 17

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

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

Answer 18

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