悬停时过渡三角形的一些问题，当鼠标移出时颜色恢复得如此之快[复制] 。

Question

这个问题在这里已经有了答案:

CSS过渡--缓进但不缓出？ (1个回答)

封闭 2个月前.

我写了这个代码

风格:

.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;

}