css使用#buttonelement：active转换div不起作用

Question

所以我的身体部分有两个元素：

#dive {
  width: 200px;
  height: 100px;
  background-color: red;
  position: relative;
  top: 0px;
  left: 0px;
  transform: scale(1);
  transition: all 2s;
}

#hei:active {
  width: 200px;
  transition: all 2s;
}

#hei:active>#dive {
  transform: scale(0);
  transition: all 2s;
}

<div id="dive"></div>
<button id="hei">hei</button>

当我单击按钮时，我想更改div元素，但是它现在不起作用。谁能解释我为什么或我写错了什么？