如何不使用JS实现：播放按钮内任意元素悬停时仅正方形变色

要实现悬停三角形或正方形时仅正方形变色，只需将hover事件绑定到父容器.play-button，而非单独绑定到正方形上。具体调整如下：

• 给父容器.play-button设置与正方形一致的宽高，确保鼠标悬停在三角形上时仍处于父容器范围内
• 将正方形的hover触发条件改为父容器hover状态

修改后的完整代码：

CSS代码 #

.play-button {
  position: absolute;
  top: 34%;
  left: 23%;
  width: 70px;
  height: 70px; /* 匹配正方形尺寸，让父容器范围覆盖三角形 */
}

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

/* 父容器hover时触发正方形颜色变化 */
.play-button:hover .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;
}

HTML代码 #

<a href="#">
  <div class="play-button">
    <div class="triangle-play"></div>
    <div class="outer-square"></div>
  </div>
</a>

原理说明 #

父容器.play-button设置宽高后，鼠标悬停在三角形（父容器的子元素）上时，父容器的hover状态会被触发；通过CSS后代选择器，只要父容器处于hover状态，正方形就会改变颜色，无论鼠标悬停在哪个子元素上。

内容的提问来源于stack exchange，提问作者Schneider G