悬停时过渡三角形的一些问题，当鼠标移出时颜色恢复得太快

Question

我写了这个代码

样式：

.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width:0 0 100px 300px ;
border-color: transparent transparent black transparent;
}
.triangle:hover{
transition: ease .9s all;
border-color: transparent transparent red transparent;
}

和html:

<div class="triangle"></div>

我的问题是，当我移出div时，颜色很快就会恢复为黑色有人能帮我解决这个问题吗？

Answer 1

您应该移动转换声明。

.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width:0 0 100px 300px ;
border-color: transparent transparent black transparent;
transition: ease .9s all; /*applied both when hovering, and not hovering*/
}
.triangle:hover{
border-color: transparent transparent red transparent;
}

如果将转换置于hover状态，则只有当您将鼠标悬停在它上面时才会应用它。因此，当您将光标移出三角形时，转换就消失了。

通过将其移动到.triangle类，它将应用于这两种状态。

Answer 2

尝试替换转换

.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width:0 0 100px 300px ;
border-color: transparent transparent black transparent;
transition: ease .9s all;
}
.triangle:hover{
border-color: transparent transparent red transparent;
}