120

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.

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

Improve this question
4
  • 3
    Remove z-index:-2 from #firstdiv and have a look at why you shouldn't just paste a link to your demo page. Commented Aug 25, 2013 at 23:14
  • 1
    Strangely worked with me, would be something with z-index, in which browser this failure happens? +1 for @MarcelGwerder Commented Aug 25, 2013 at 23:17
  • The answer below fixed this for me, but closing and reopening chrome. Commented May 10, 2022 at 5:57
  • For people with it set, pointer-events: none will also stop cursor from having an effect. Commented Sep 13, 2023 at 14:48

20 Answers 20

Reset to default
552
+50

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.

Update (11/18/2023): If you ever experience the issue where your cursor doesn't change to indicate you can drag to resize an application window on MacOS, this may be the culprit.

Improve this answer
Sign up to request clarification or add additional context in comments.

41 Comments

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.
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.
In all my years of coding, this is the weirdest bug I've ever encountered. Thanks for the fix!
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)
Holy crap, this just happened to me on my MBP M1 Max. Was driving me crazy! Thank you!
|
123

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

Improve this answer

2 Comments

batter ans is ==> : pointer-events: none; <=== not need to Z-index
@lalitbhakuni that is incorrect and actually prevents the cursor from changing altogether...
49

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>
Improve this answer

2 Comments

pointer-events: auto fixed the cursor pointer, but it no longer triggers the expected action on click
Not to mention, adding this to every clickable element on the page isn't really a solution.
38

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

enter image description here

Improve this answer

2 Comments

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

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

Improve this answer

2 Comments

Are you really talking and caring about IE 5/5.5?
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.
7 
position: relative;
z-index: 2;
cursor: pointer

worked for me.

Improve this answer

Comments

3

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,

Improve this answer

Comments

2

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

Improve this answer

Comments

1

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;
}
Improve this answer

Comments

1

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;
}
Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

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

After removing this, cursor: pointer works as expected.

Improve this answer

Comments

0

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

Improve this answer

Comments

0

In macOS Sonoma 14.2.1, MacBook Air 2020, I found that I just needed to restart my computer, and then the cursor: pointer worked again on the web pages I was developing.

Looks like I either had too many chrome tabs open, or maybe an issue with my Adobe Illustrator that I had open, or my AltTab app I had running. I can't nor have time to pin down which app was the culprit. But suffice to say, I just needed to restart my computer to get css cursor: pointer to work again.

Improve this answer

Comments

-1

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

Improve this answer

Comments

-1

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

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

Comments

-2

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; 
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.