Why is "cursor:pointer" effect in CSS 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;
}

is a small part of my code. I set cursor:pointer for .about>span but when the mouse hover on those texts in <span>, the cursor does not change in to pointer mode. I would like to know why it is not working. I am really new at html and css and this question may be dumb but plz help me. Thanks in advance.