为什么CSS中的"cursor:pointer"效果不起作用

Question

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

是我的代码的一小部分.我设置cursor:pointer为.about>span但是当鼠标悬停在那些文本上时<span>,光标不会改变为指针模式.我想知道它为什么不起作用.我是html和css的新手,这个问题可能很愚蠢但plz帮助我.提前致谢.

Answer 1

我和我的css搞砸了好几个小时,改变了页面上每个元素的定位和z-index.我删除了DOM中的所有其他元素,除了带有光标的那个元素:悬停时指针,它仍然无效.

对我来说,在Mac OSX El Captain V 10.11上,问题与Photoshop CC的某种干扰有关.一旦我关闭了photoshop,光标就会重新开始工作.

解决方案:关闭并重新打开photoshop

Answer 2

简短的回答是你需要改变z-index,以便#firstdiv被认为是在其他div之上.

Answer 3

cursor:pointer 在使用Chrome的移动模拟器时不起作用。

Answer 4

刚发生在我身上,在我的情况下,这是由于pointer-events: none;在父元素上设置的CSS规则而我忘了它.

这导致任何指针事件被忽略,其中包括光标.

要解决此问题,您只需将样式设置为允许指针事件:

.about>span{
    cursor:pointer;
    pointer-events: auto;
}

或者直接在元素中:

<span style="pointer-events: auto;">...</span>

Answer 5

还要添加光标:手.有些浏览器需要这样做.

Answer 6

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

为我工作。