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>

Solution

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