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

Question

我有一个非常简单的链接,显示为块,角落里有一个小绿星.

的jsfiddle

我想这样做,当你将鼠标悬停在链接上时,链接本身会略微透明,但:before伪选择器不会受到影响.

我看了一些关于这方面的问题,但由于某种原因,我无法让他们的解决方案起作用.这可能吗？我不确定我是否只是编写错误的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的一个例子