How can I apply the hover: effect on an element when I mouse over its parent element? I've got a div element, inside of it I got multiple element such as ,

and ... I want my element's size change when I mouse over my (parent) element. Down below you can see the code. I'd like to mouse over the div with id "midBox" and see changes on the element.

<div id="midBox">
            <header>RECOMMENDED</header>
            <h2>Small<br>Business<br>Plan</h2>
            <h3>$59 per month</h3>
            <h4>Sign Up Now</h4>
            <p >YOU GET PULSE BASICS, PLUS:</p>
            <ul>
                <li><i class='bx bx-check'></i>Manage cash flow across multiple financial accounts</li>
                <li><i class='bx bx-check'></i>Invite your investors, book keeper, or management team to see
                    reports or manage cash flow</li>
                <li><i class='bx bx-check'></i>Integrate with QuickBooks Online for more accurate cash flow</li>
                <li><i class='bx bx-check'></i>Track your actual cash flow alongside your projected cash flow
                </li>
            </ul>
        </div>

CodePudding user response：

Here this example can help

#midBox:hover h2 {
    transform: scale(1.1);
}

Simply you can apply hover on parent and select the element then do whatever you want with that selected element.