<div class="main1">
  <div class="forH"></div>
  <div class="forH1"></div>
  <div class="main"></div>
</div>

.main1 {
  position: relative;
  width: 300px;
  height: 150px;
}
.main {
  background: #000;
  width: 100%;
  height: 100%;
}
.forH, .forH1 {
  width: 50%;
  height: 150px;
  display: inline-block;
  position: absolute;
}
.forH1 {
  right: 0;
}

.forH:hover ~ .main {
  background: red;
}
.forH1:hover ~ .main {
  background: green;
}