html - CSS-所有 :hover event elements should be #fff text color

Question

我在 :hover 上遇到了 block 子元素的一些问题事件。我有一个定价 block ，主要任务是在 :hover 上获取所有文本 #fff 颜色.

因为当我尝试 :hover <h3>元素和 <p>它们是元素 :hover好吧，但我需要它改变它们的颜色，即使我只是 :hover父 block 。但是如果没有 JavaScript，我怎么能做到这一点呢？有可能还是我遗漏了什么？

这是我的 HTML:

<section>
    <div id="Pricing">
        <div class="container">
            <h1>Pricing Plans</h1>
            <div class="price-group">
                <div class="price-block">
                    <h3>Students</h3>
                    <span class="price-main">$ 8</span>
                    <span class="price-additional">Per Month</span>
                    <p class="footnote">Personal License</p>
                    <button class="btn-price">Purchase</button>
                </div>
           </div>
       </div>
   </div>
</section>

和 CSS:

.price-block {
    width: 270px;
    min-height: 450px;
    margin-left: 20px;
    text-align: center;
    background-color: #f4f4f4;
    transition: .4s ease-in-out;
}
.price-block:hover {
    background-color: #000;
    color: #fff;
    transform: scale(1.1);
}

.price-block h3 {
    margin-top: 40px;
    margin-bottom: 50px;
    font-size: 20px;
    color: #333;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

这是一些照片:

感谢您的关注!

Answer 1

您需要为所有子元素添加级联样式。 * 适用于所有 child (和他们的 child )。为避免设置按钮文本的样式，您应该使用 :not(button)，这将使按钮文本保持黑色，就像您的图像中一样。

这是您应该添加的样式规则:

.price-block:hover *:not(button) {
  color: #fff;
}

演示:

.price-block {
    width: 270px;
    min-height: 450px;
    margin-left: 20px;
    text-align: center;
    background-color: #f4f4f4;
    transition: .4s ease-in-out;
}
.price-block:hover {
    background-color: #000;
    color: #fff;
    transform: scale(1.1);
}

.price-block:hover *:not(button) {
  color: #fff;
}

.price-block h3 {
    margin-top: 40px;
    margin-bottom: 50px;
    font-size: 20px;
    color: #333;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

<section>
    <div id="Pricing">
        <div class="container">
            <h1>Pricing Plans</h1>
            <div class="price-group">
                <div class="price-block">
                    <h3>Students</h3>
                    <span class="price-main">$ 8</span>
                    <span class="price-additional">Per Month</span>
                    <p class="footnote">Personal License</p>
                    <button class="btn-price">Purchase</button>
                </div>
           </div>
       </div>
   </div>
</section>