3 различных эффекта наведения для 3 различных предметов на 1

Question

У меня довольно странный запрос, и он меня немного озадачил.

По сути, у меня есть что-то вроде этого:

01 A Title

1. a item
2. еще один элемент

То есть, когда номер или заголовок наведены. 01 становится белым Название становится красным, а элементы списка становятся белыми.

Теперь я знаю, что вы можете сделать что-то вроде

.number:hover .title{
}

Но не знаете, как это сделать go.

<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>

Желаемый эффект при наведении

Будем благодарны за любые советы или подсказки. Я хотел бы узнать, как добиться этого должным образом, таким образом, qeuration

Answer 1

Попробуйте вот так

.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 2

вы можете использовать брата css селектор

.below-num:hover {
    color: white;
}

.below-num:hover + .below-title {
    color: red;
}

Answer 3

Хорошо, я думаю, что могу помочь: вам понадобится это в вашем css:

Первое - это то, что всегда будет.

.number .title{
some style
}

Второе - для если вы наводите на него курсор.

.number:hover .title{
}

Если это не то, что вам нужно, уточните, пожалуйста, немного лучше.