如何使悬停效果不适用于 :before 伪选择器？

Question

我有一个非常简单的 link，显示为角落有一个小绿星的方块。

JsFiddle

我想做的是，当你将鼠标悬停在 link 上时，link 本身会变得稍微透明，但 :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

如何使悬停效果不适用于 :before 伪选择器？

How to make hover effect not apply to :before pseudo selector?

css

hover