3 Different hover effects for 3 different items on 1 hover - html

Question

I have this rather odd request, and its got me a little baffled.
Essentially I have something like this:
01
A Title
a item
another item
So when the number or the Title gets hovered on. 01 become's white A title becomes red and the list items become white.
Now I know you can do something like
.number:hover .title{
}
But not to sure how to go about this.
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>
The Desired effect for the on hover
Any Advice or tips would be appreciated. I'd like to learn how to achieve this properly thus the qeustion

Answer 1

you can use sibling css selector
.below-num:hover {
color: white;
}
.below-num:hover + .below-title {
color: red;
}

Answer 2

Try this way
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
* {
background: black;
color: white;
}
li {
color: gray;
}
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>

Answer 3

Ok i think i can help:
You will need this in your css:
The first is just what it always will be.
.number .title{
some style
}
The second is is for if you hover on it.
.number:hover .title{
}
If this isn't what you want please clarify i litle bit better.