JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">
  <!-- 
  In this example we use "+"
  It will apply only to only to first H4 tag
  -->
  <span>X</span>
  <h4>
    First H4
  </h4>
  <h4>
    Second H4
  </h4>
</div>

<div class="second">
  <!-- 
  In this example we use "~"
  It will apply only to only to first H4 tag
  -->
   <h4>
    Second H4
  </h4>
  <span>X</span>
  <h4>
    First H4
  </h4>
  <h4>
    Second H4
  </h4>
</div>
<h4>
outside
</h4>

CSS

span {
  display: block;
  width: 20px;
  height: 20px;
  background-color: red
}
.first {
  background-color: blue;
  margin-bottom: 10px;
  display: block;
  width: 120px;
  height:120px;
}
.first h4 {
  color: white;
}
.first span:hover + h4 {
  color: black
}


.second {
  background-color: blue;
  display: block;
  width: 120px;
  height:120px;
}
.second h4 {
  color: white;
}
.second span:hover ~ h4 {
  color: black
}