时间戳

首页 > 解决方案 > CSS 光标 [不允许] 在 Chrome 中不起作用

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

问题描述

我有一个表格，其中输入字段作为单元格。有一个添加行的选项和一个删除行的选项。我希望第一行的删除按钮不起作用。它不可点击。它淡出。现在我想悬停，有一个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();}

标签： htmlcsshtml-table

解决方案

问题是您正在设置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>

推荐阅读