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

Add > after hover and then the .classname of the element that you wanna change.

.parentClass{
    height: 300px;
    width: 300px;
    background-color: red;
}

.childClass{
    background-color: blue;
    height: 150px;
    width: 150px;
}

/* This is where you define the hover effect */
.parentClass:hover > .childClass {
    background-color: green;
}

----------------------
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test</title>
</head>

<body>
    <div class="parentClass">
        <div class="childClass">

        </div>
    </div>
</body>

</html>

You can use these CSS rules :

.main {
  background-color: #ccc;
}

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

.main:hover > div {
  color: red;
  font-weight: bold;
}
<div class="main">
  <div class="num">Num</div>
  <div class="name">Name</div>
</div>