CSS :after过渡效果（鼠标悬停时）

Question

我正在使用:after来创建一个悬停设计（长故事，用VC在WP中），并且试图使:after CSS在有人悬停在初始div上时淡入。

这里是一个fiddle - 点击这里 以下是我的方法：

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

我正在努力使绿色背景和“阅读更多”按钮平滑地淡入。

我该如何实现这一点？

- Max

---

用关键帧制作动画如何？ - J o

@Jojo 你觉得没有关键帧的转换怎么样？;) - connexo

@connexo 哦，我没有考虑到不透明度。我试图直接使用过渡来操作背景颜色，但那并没有起作用。所以我认为最好使用动画。 - J o

Answer 1

只需添加

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

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

- connexo

---

非常感谢！我已经苦苦挣扎了一段时间。 - Max

在CSS中，过渡非常简单和舒适。 - connexo

Answer 2

是的，connexo说得对，这是一个关于你的代码jsfiddle的简单示例。

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

- codegaze

---

谢谢你提供这个示例，让我更好地理解了它！ - Max

Answer 3

与connexo相同

.style::after {
    width: 0;
    transition: width 0.5s;
}

.style:hover::after {
    width: 100%;
}

- lan about