CSS：

2016-11-20 35 views 0 likes

我使用:after创建了设计悬停（长的故事，在与VC WP）和我没有试图让:after CSS淡入当有人悬停在过渡（悬停）后最初的div。CSS：

这里是一个小提琴 - click here

下面是我的做法：

.border-home:hover:after { 
    position: absolute; 
    top: 0%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url(http://i.imgur.com/3Si5tIy.png) 50% 50% no-repeat; 
    background-size: 190px 50px; 
    content: ''; 
    cursor: pointer; 
    background-color: rgba(127, 165, 61, 0.9); 
}

我努力使绿色背景和更多按钮淡入顺利。

我该如何做到这一点？

来源

2016-11-20 Max

如何使用关键帧动画？ –

@Jojo如何在没有关键帧的情况下进行转换？ ;） – connexo

@connexo哦，我没有想过不透明。我试图直接使用过渡来操作Background-color，但这并没有奏效。所以我认为动画是最好的。 –

回答

只需添加

.border-home::after { 
    transition: opacity 0.4s ease; 
    opacity: 0; 
} 

.border-home:hover::after { 
    opacity: 1; 
}

来源

2016-11-20 11:25:43 connexo

非常感谢！我一直在为此苦苦挣扎。 – Max

CSS中的转换非常简单和舒适。 – connexo

叶氏，connexo是正确的，这是你的代码jsfiddle一个简单的例子。

首先，你需要设置你的造型在:after（背景，位置等）和不透明度一些过渡性质，然后就显示出它在:hover:after）

来源

2016-11-20 11:39:16 codegaze

谢谢你提供的小提琴让我的头附近！ – Max

CSS：

回答

相关问题