html - 伪元素上的 css 过渡不起作用

Question

我试图在视频框上制作一个“播放”按钮，但 :before 元素上的转换不起作用。

我做错了什么？

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  transition:1s;
}
div:before:hover{
  transition:1s;
}

div:hover:before{
  content:"";
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #0094d9;
  position: absolute;
  z-index: 9999;
  left: 45%;
  top: 40%;
  transition: 1s;
}

<div></div>

Answer 1

只需在 :before 元素中添加所有 css 而不是 hover

div{
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  transition:1s;
}
div:before{
  content:"";
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #0094d9;
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.5;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}
div:hover:before{
  opacity: 1;
}

<div></div>