Troubleshooting problems with block's child elements during the :hover event. Specifically, I have a pricing block where I want all texts to be of color #fff when hovered over.
Currently, when hovering over the <h3> and <p> elements individually, they change color as expected. However, I need them to change color even when just hovering over the parent block. How can I achieve this effect without using JavaScript? Is it possible or did I overlook something?
This is the HTML code:
<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>
And here is the CSS code:
.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;
}
Here are some screenshots: https://i.sstatic.net/mcBYX.png https://i.sstatic.net/bF7Fc.png
Thank you for your attention!