我正在尝试让 :after:hover 工作答案

【问题标题】：I'm trying to get :after:hover to work我正在尝试让 :after:hover 工作
【发布时间】：2015-02-27 04:22:59
【问题描述】：

我有一个背景图像，我试图在其上模拟不透明度。 opacity:.5; 不起作用，所以我决定在顶部添加一个半透明的白色方块。

.pic:after{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pic:after:hover{
    content:"";
    background-color: rgba(118, 255, 161, 0.35);
}

我错过了什么？

【问题讨论】：

除了选择器反转之外，您还可以将图像放在 after 元素中并根据需要设置不透明度 :) 见css-tricks.com/snippets/css/transparent-background-images
我真的很高兴你发布了这个！我已经知道这项技术将来会在其他领域对我有所帮助！ :D

标签： html css css-selectors background-image opacity

【解决方案1】：

.pic:after 不是 DOM 中的元素。您必须在.pic 上应用:hover，然后选择它的:pseudo-element(.pic:hover:after)。

.pic:hover:after{
    content:"";
    background-color: rgba(118, 255, 161, 0.35);
}

【讨论】：