How to trigger hover effect on child elements when hovering over the parent div?-CodePudding

Currently, I am working on a nextJS web application and have some issue with the css. I have a div (parent node) and inside the div have multiple child elements. So whenever I hover over the parent div element, I want it to trigger on the child elements too.

For example this is a simplified version of my code

export default function portfolio() {
return (
    <div className={homeStyles.mainContent}>
        <div className={homeStyles.titleNum}>
            <h2>01</h2>
        </div>
        <div className={homeStyles.titleName}>
            <h2>Telegram Bot</h2>
        </div>
    </div>
    )
}

So whenever I hover over the parent div (.mainContent), it will change the background color as well as the child elements (Title Number and Title Name), will change font color and increase font size, simultaneously.

Can anyone enlighten me how to make it happen using nextJS. Thank you.

CodePudding user response：

Not sure whether I can do it this way?

.main {
    background: blue; 
}

.main:hover {
    background: green;
}

.main:hover .num,
.main:hover .name {
    color: red;
    font-weight: bold;
}

<div >
    <div >Num</div>
    <div >Name</div>
</div>

CodePudding user response：

You can use these CSS rules :

.main {
  background-color: #ccc;
}

.main:hover {
  background-color: #aaa;
}

.main:hover > div {
  color: red;
  font-weight: bold;
}

<div >
  <div >Num</div>
  <div >Name</div>
</div>