Question

所以，在我的代码中，我有一个锚点，我添加了一个：之前为了创建一个css三角形。当你将鼠标悬停在锚点上时，我正试图获得不透明度过渡以显示三角形。但出于某种原因，很多时候如果你“匆匆进入”链接它会跳过过渡并且它会显示完全不透明的三角形，但是，如果你轻轻地盘旋在链接的边界上，过渡就会起作用。我想知道我做错了什么...... 另外，我注意到（如果我不是疯了），在jsFiddle上它的效果会好一些，但是再一次，我确实稍微更改了我的代码以包含这一部分。你可能需要从不同角度玩一点，看看我在说什么。

最后，当您从锚点外移动指针时，转换不适用。

以下是我的code：JSFIDDLE

Answer 1

我认为这可以解决您的问题：

http://jsfiddle.net/PhE59/3/

基本上我将边界声明移到了悬停声明之外：

a:first-child:before {
        border-bottom: 63px solid black;
    border-left: 186px solid transparent;
}
a:last-child:before {
    border-bottom: 63px solid black;
    border-left: 150px solid transparent;
}
a:first-child:hover:before {
    opacity:1;  
}

不会强制在每个悬停上创建和删除边框，而是仅创建一次边框（在页面加载时），并通过仅影响不透明度让动画顺利进行。

如果您快速悬停仍有问题，可以通过将动画时间减少到1秒来处理

css3三角形：在不透明度过渡之前不能正常工作

1 个答案: