Change color on play button hover

I have a play button with two shapes (triangle, and square) inside this parent div. When I hover over either of them, I want just the square to change color. Right now, it only changes color when hovered over the square and not the triangle that is laid on top of it. When hovered over the triangle, it goes back to its original color Any ideas how to target the triangle on hover to change background color on just the square without using JS?

CODE

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.outer-square {
  height: 70px;
  width: 70px;
  background-color: #f2635d;
  border-radius: 6px;
  transition: 0.3s;
}

.outer-square:hover {
  background-color: #9c2514;
}

.triangle-play {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 17px 30px;
  border-color: transparent transparent transparent #fff;
  z-index: 9;
  top: 17px;
  left: 23px;
}

<!-- language: lang-html -->

<a href="#">
  <div class="play-button"style="position: absolute; top: 34%; left: 23%">
    <div class="triangle-play"></div>
    <div class="outer-square"></div>
  </div>
</a>

<!-- end snippet -->

Change .outer-square:hover to .play-button:hover > div.outer-square. This way, any hovering over the parent container will change the outer-square child's background.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.outer-square {
  height: 70px;
  width: 70px;
  background-color: #f2635d;
  border-radius: 6px;
  transition: 0.3s;
}

.play-button:hover > div.outer-square {
  background-color: #9c2514;
}

.triangle-play {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 17px 30px;
  border-color: transparent transparent transparent #fff;
  z-index: 9;
  top: 17px;
  left: 23px;
}

<!-- language: lang-html -->

<a href="#">
  <div class="play-button" style="position: absolute; top: 34%; left: 23%">
    <div class="triangle-play"></div>
    <div class="outer-square"></div>
  </div>
</a>

<!-- end snippet -->