Reputation: 1205

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

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>

Upvotes: 116

Answers (20)

tedz2usa

Reputation: 96

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.

Upvotes: 0

ThinkingInBits

Reputation: 11432

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.

Upvotes: 542

Mostafa

Reputation: 121

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

Upvotes: 1

dealwap

Reputation: 721

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

Upvotes: 0

zMan

Reputation: 3289

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

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

After removing this, cursor: pointer works as expected.

Upvotes: 0

Sj.

Reputation: 1422

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

Upvotes: 123

Ian paul

Reputation: 37

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

Upvotes: -2

chandrapal3000

Reputation: 21

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

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

Upvotes: -1

Artem

Reputation: 1

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

Upvotes: -1

Saber

Reputation: 2648

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

Upvotes: 0

MD KAMRUL HASAN SHAHED

Reputation: 690

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,

Upvotes: 3

Lan

Reputation: 5

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

Upvotes: 0

Thomas

Reputation: 117

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

worked for me.

Upvotes: 7

Rijo

Reputation: 3043

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

Upvotes: 0

Lukas Owen

Reputation: 11

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

Upvotes: 0

JuZDePeche

Reputation: 789

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

Upvotes: 1

0xcaff

Reputation: 13681

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

Upvotes: 38

Shadow Wizard

Reputation: 66389

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>

Upvotes: 48

Brad Peabody

Reputation: 11377

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

Upvotes: 2

H2ONOCK

Reputation: 981

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

Upvotes: 7

Why is &quot;cursor:pointer&quot; effect in CSS not working

Answers (20)

Related Questions

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