Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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;
}
like image 382
You Chia Lai Avatar asked Aug 25 '13 23:08

You Chia Lai


People also ask

Why cursor pointer is not working?

Check that the battery of the mouse is charged. Make sure that the receiver (dongle) is firmly plugged in to the computer. If your mouse and receiver can operate on different radio channels, make sure that they are both set to the same channel.

How do I change cursor to pointer in CSS?

You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.

How do I get my cursor to show as a pointer?

Once you're in Mouse settings, select Additional mouse options from the links on the right side of the page. In Mouse Properties, on the Pointer Options tab, at the bottom, select Show location of pointer when I press the CTRL key, and then select OK. To see it in action, press CTRL.

Which property allows changing the style of the mouse cursor CSS?

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set.


3 Answers

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.

like image 76
ThinkingInBits Avatar answered Oct 18 '22 01:10

ThinkingInBits


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

like image 32
Sj. Avatar answered Oct 18 '22 01:10

Sj.


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>
like image 38
Shadow Wizard Hates Omicron Avatar answered Oct 18 '22 02:10

Shadow Wizard Hates Omicron