Question

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

JsFiddle

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

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

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

Answer 1

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

在:hover上更改Alpha值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

以下是jsFiddle

的示例

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

1 个答案: