如何使用css将光标添加到父元素并将其应用于子元素？答案

【问题标题】：How to add cursor to parent element and apply that to child elements too using css?如何使用css将光标添加到父元素并将其应用于子元素？
【发布时间】：2023-03-06 21:33:01
【问题描述】：

我想将 cursor: not-allowed 应用于父元素，这也应该应用于子元素。

我想做什么？我有带有“卡片”类的父 div 元素和带有光标指针的光标指针和带有光标指针的子元素。现在，当父 div 元素具有“card”和“disabled”类时，我希望父 div 元素和子元素具有 cursor:not-allowed。

下面是我的html代码，

<div class="card disabled">
    <a href="some">
        <div class="image">
            <img/>
        </div>
    </a>

    <a href="some">
        <button class="icon">
            <svg />
        </button>
    </a>

    <div class="footer">
        <div class="info">
            <a href="somewhere">
                <h4>text</h4>
             </a>
         </div>
         <button>
             <svg/>
         </button>
         <div class="more">
             <div class="container">
                 <button></button>
             </div>
         </div>
     </div>
 </div>

下面是css，

.card {
     .icon {
         cursor: pointer;
     }
     .image {
         cursor: pointer;
     }
     .footer {
         svg {
             cursor: pointer;
         }
     }
 }

现在我已经应用了一些类似下面的样式来制作光标：当父 div 有类卡和禁用时不允许

.card.disabled {
    cursor: not-allowed;
}

这不起作用。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

您的第一个 CSS sn-p 不是有效的 CSS，除非您使用的是某种预处理器，如 SASS 或 LESS（在这种情况下，最好在问题或标记中提及它它）
试试 .card.disabled { .icon, .image, .footer svg { cursor: not-allowed; } }

标签： html css

【解决方案1】：

试试这个：

.card, 
.card * {
     cursor: pointer;
}

.card.disabled,
.card.disabled * {
    cursor: not-allowed;
}

【讨论】：

【解决方案2】：

你的这个 css 代码：

.card.disabled,
.card.disabled * {
    cursor: not-allowed;
}

另外，你不能真正改变链接的光标，所以，我建议也使用这个代码：

.card.disabled a {
    pointer-events:none;
}

【讨论】：

你比我快 2 分钟 :)
@Szekelygobe 不值得，因为 U C XD