我试图在视频框上制作一个“播放”按钮,但 :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>
最佳答案
只需在 :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>
关于html - 伪元素上的 css 过渡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46951857/