title: CSS Cursor [not-allowed] Not Working In Chrome
body: <p>I have a table with input fields as the cells. There is an option to add rows and one to delete rows. I want the first row's delete button to not work. It is not clickable. It is faded out. Now I want on hover, there is a <code>not-allowed</code> cursor.</p>
  <p>But it doesn't work!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.clonable .del{pointer-events: none;
   opacity: 0.5;
      cursor: not-allowed;  
      cursor: -moz-not-allowed;
      cursor: -webkit-not-allowed;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th&gt;Amount&lt;/th&gt;
          &lt;th&gt;Merchant&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Source&lt;/th&gt;
          &lt;th&gt;Delete&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr class="clonable"&gt;
          &lt;td&gt;&lt;input type='text' name='des1' required&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type='data' name='d1' required&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type='number' step='0.01' min='0' name='a1' required&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;select name='m1' required id='m'&gt;
              &lt;option value='' disable selected&gt;Select One&lt;/option&gt;
              &lt;?php
            while($row = mysqli_fetch_assoc($merch)){
            foreach($row as $value){
            echo "&lt;option value='$value'&gt;$value&lt;/option&gt;";}}
            ?&gt;
            &lt;/select&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
            &lt;select name='t1' required id='t'&gt;
              &lt;option value='' disable selected&gt;Select One&lt;/option&gt;
              &lt;?php
            while($row = mysqli_fetch_assoc($type)){
            foreach($row as $value){
            echo "&lt;option value='$value'&gt;$value&lt;/option&gt;";}}
            ?&gt;
            &lt;/select&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
            &lt;select name='s1' required id='s'&gt;
              &lt;option value='' disable selected&gt;Select One&lt;/option&gt;
              &lt;?php
            while($row = mysqli_fetch_assoc($source)){
            foreach($row as $value){
            echo "&lt;option value='$value'&gt;$value&lt;/option&gt;";}}
            ?&gt;
            &lt;/select&gt;
          &lt;/td&gt;
  
          &lt;td&gt;&lt;button class='del'&gt;Delete&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JS CODE</p>
  <pre><code>$(document).on(&quot;click&quot;, &quot;.del&quot;, function() {$(this).closest('tr').remove();}
  
  </code></pre>