如何使用CSS将光标添加到父元素并应用于子元素？

Question

我希望将cursor: not-allowed应用于父元素，并且这也应该适用于子元素。

我要做什么？ 我有一个带有class“card”和光标指针的父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 类时，鼠标指针变为 not-allowed。

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

这个不起作用，请有人帮我解决一下。谢谢。

- someuser2491

---

你的第一个CSS片段不是有效的CSS，除非你使用某种预处理器，比如SASS或LESS（在这种情况下，最好在问题中提及或标记它）。 - Calvin Nunes

try .card.disabled { .icon, .image, .footer svg { cursor: not-allowed; } } - katwhocodes

Answer 1

尝试这个：

试试这个：

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

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

- Szekelygobe

Answer 2

尝试这个CSS代码：

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

此外，您实际上无法更改链接的光标，因此我建议也使用此代码：

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

- V.Volkov

---

你比我快了两分钟 :) - Szekelygobe

@Szekelygobe，这不值得，就像你看到的那样。 - V.Volkov