css - 如何使悬停效果不适用于 :before pseudo selector?

Question

我有一个非常简单的链接，显示为 Angular 落里有一个小绿星的 block 。

JsFiddle

我想做的是，当您将鼠标悬停在链接上时，链接本身会变得稍微透明，但 :before 伪选择器不会受到影响。

我看了一些questions对此，但出于某种原因，我无法让他们的解决方案发挥作用。这可能吗？我不确定我是否只是在编写错误的 CSS 选择器。

编辑:理想情况下，我希望能够处理背景图像和背景颜色。

Answer 1

改用 rgba(r, g, b, a) 值。

在 :hover 上更改 alpha 值。

a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  position: relative;
}
a:before {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  content: "★";
  background: green;
}
a:hover {
  background: rgba(255, 0, 0, 0.5);
}

<a href="www.google.com"></a>

---

如果您正在处理图像，您实际上无法在不影响父图像的情况下更改图像的不透明度。如果你真的想使用伪选择器，你可以在元素周围创建一个容器，将 :before 选择器附加到它，并只在内部元素上应用 hover 状态.

div {
position: relative;
}

a {
  display: block;
  width: 200px;
  height: 200px;
  background: url(http://suptg.thisisnotatrueending.com/archive/19343530/images/1338832441002.png);
}

div:before {
  position: absolute;
  top:0;
  left:0;
  color:white;
  content:"★";
  background: green;
  z-index: 2;
}

a:hover {
 opacity: 0.5;   
}

<div>
    <a href="www.google.com"></a>
</div>

这是一个例子 jsFiddle