Question

因此，当您将光标悬停在其上时，我已尝试使图像更改不透明度。问题是改变不透明度根本不起作用。

以下是代码 CSS

.jarleby {
  z-index: 10001;
  position: fixed;
  left: 43%;
  top: 60%;
  margin-left: -45px;
  margin-top: -56px;
  animation-delay: 0.3s;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.jarleby:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

HTML

<div class="jarleby animated fadeInUp">
  <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank"><img src="img/steam.png"></img> </a>
</div>

Answer 1

.jarleby {
    z-index: 10001;
    position: fixed;
    left: 43%;
    top: 60%;
    margin-left: -45px;
    margin-top: -56px;
    animation-delay: 0.3s;
    opacity: 0.5 !important;
    filter: alpha(opacity=50); /* For IE8 and earlier */
  }
    
.jarleby:hover {
  opacity: 1.0 !important;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

<div class="jarleby animated fadeInUp">
  <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank">
    <img src="http://placehold.it/350x150"/>
  </a>
</div>

Answer 2

其他可能会覆盖您的CSS代码。尝试将!important添加到opacity: 1;部分的:hover规则中。见下面的例子：

.jarleby:hover {
  opacity: 1 !important;
}

悬停时的不透明度不起作用

2 个答案: