为什么 CSS 中的“光标：指针”效果不起作用

Question

我将 cursor: pointer 设置为 .about > span ，但是当我的鼠标悬停在 <span> 中的这些文本上时，光标不会变为指针模式。我想知道为什么它不起作用。

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

原文由 You Chia Lai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要更改 z-index 以便在其他 div 之上考虑 #firstdiv 。

原文由 Sj. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无论你做什么，光标都不会改变，除非你将样式设置为 :hover

除了您已经拥有的元素类之外，这还需要如下所示。

 .about > span:hover {
    cursor:pointer;
}

原文由 Mostafa 发布，翻译遵循 CC BY-SA 4.0 许可协议