Question

我正在使用 :after 创建一个悬停在设计上（长篇故事，在WP中使用VC）并且我没有尝试获取 :after 当有人在最初的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);
}

我正在努力使绿色背景和阅读更多按钮顺利淡出。

我怎样才能做到这一点？

Answer 1

添加

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

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

Answer 2

Yeap，connexo是对的，这是代码jsfiddle的一个简单示例。

首先，您需要在:after（背景，位置等）和一些不透明度的过渡属性中设置样式，然后只需在:hover:after中显示;）

CSS：转换后（悬停时）

2 个答案: