At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well.
Here's 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>
)
}
When the parent div (.mainContent) is hovered over, I want the background color to change and also have the child elements (Title Number and Title Name) alter their font color and size simultaneously.
Could someone guide me on achieving this in nextJS? Thank you.
EDITED
Is the following approach effective?
<div class="main">
<div class="num">Num</div>
<div class="name">Name</div>
</div>.main {
background: blue;
}
.main:hover {
background: green;
}
.main:hover .num,
.main:hover .name {
color: red;
font-weight: bold;
}Any suggestions on improving this process? It feels cluttered, especially when dealing with multiple child elements simultaneously. Is there a way to make the code more concise and elegant?