CSS 光标 [不允许] 在 Chrome 中不起作用

Question

我有一个以输入字段作为单元格的表格。有一个选项用于添加行，一个选项用于删除行。我希望第一行的删除按钮不起作用。它不可点击。它已淡出。现在我想要悬停，有一个not-allowed光标。

但这不起作用！

.clonable .del{pointer-events: none;
 opacity: 0.5;
    cursor: not-allowed;  
    cursor: -moz-not-allowed;
    cursor: -webkit-not-allowed;
}

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Merchant</th>
        <th>Type</th>
        <th>Source</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clonable">
        <td><input type='text' name='des1' required></td>
        <td><input type='data' name='d1' required></td>
        <td><input type='number' step='0.01' min='0' name='a1' required></td>
        <td>
          <select name='m1' required id='m'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($merch)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='t1' required id='t'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($type)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='s1' required id='s'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($source)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td><button class='del'>Delete</td>
    </tr>
    </tbody>
  </table>

JS代码

$(document).on("click", ".del", function() {$(this).closest('tr').remove();}

Answer 1

问题是您正在pointer-events: none;按钮上进行设置。的元素pointer-events: none不会参与指针事件，但也不会更改光标或状态（请参阅： https: //css-tricks.com/almanac/properties/p/pointer-events/）。

删除pointer-events: none;并禁用按钮效果很好：

$(document).on("click", ".del", function() {$(this).closest('tr').remove();})

.clonable .del{
    opacity: 0.5;
    cursor: not-allowed;  
    cursor: -moz-not-allowed;
    cursor: -webkit-not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Merchant</th>
        <th>Type</th>
        <th>Source</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clonable">
        <td><input type='text' name='des1' required></td>
        <td><input type='data' name='d1' required></td>
        <td><input type='number' step='0.01' min='0' name='a1' required></td>
        <td>
          <select name='m1' required id='m'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($merch)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='t1' required id='t'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($type)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='s1' required id='s'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($source)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td><button class='del' disabled='true'>Delete</td>
    </tr>
    </tbody>
  </table>