title: Why is "cursor:pointer" effect in CSS not working
body: <p>I set <code>cursor: pointer</code> for <code>.about &gt; span</code>, but when my mouse hovers on those texts in <code>&lt;span&gt;</code>, the cursor does not change into pointer mode. I would like to know why it is not working.</p>
  <p>HTML:</p>
  <pre><code> &lt;div id=&quot;firstdiv&quot;&gt;
        &lt;div id=&quot;intro&quot;&gt;
            &lt;h1 id=&quot;name&quot;&gt;YOU CHIA LAI&lt;/h1&gt;
                &lt;ul&gt;
                    &lt;li class=&quot;about&quot;&gt;I am a Master of &lt;span&gt;Architecture&lt;/span&gt;  
                     candidate at Rice University.  
                    &lt;/li&gt;
                    &lt;li class=&quot;about&quot;&gt;I am also interested in &lt;span&gt;photography&lt;/span&gt; &amp;        
                    &lt;span&gt;web design&lt;/span&gt;.&lt;/li&gt;
                    &lt;li class=&quot;about&quot;&gt;I wish you can know more &lt;span&gt;about&lt;/span&gt; me.
                    &lt;/li&gt;
               &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#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 &gt; span {
      cursor:pointer;
      font-family:Eurofurence Light;
      padding:0 0 3px 0;
      color:#01DFA5;
  }
  </code></pre>