html - :hover and :hover:before not working properly

Question

我已经解决了很多具有类似标题的已解决问题，但我尝试的任何方法似乎都不起作用。

我希望将 ava.png 图像重定向到另一个页面，但在悬停时我想要一个 :before 图像 (ava_background_hoover.png )出现。

我的做法可能全错了，但这就是我到目前为止所得到的:

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
}

#slide1:hover {
  position: relative;
}

#slide1:hover:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  position: absolute;
  z-index: -1;
}

#slide2 {
  opacity: 1;
  position: relative;
  z-index: 2;
  margin-left: 7px;
  margin-top: 0px;
}

#slide3 {
  z-index: -1;
  position: absolute;
}

<section id="header">
  <div class="inner">
    <img id="slide1" src="https://www.upload.ee/image/6050955/ava.png"/><img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
  </div>
</section>

Fiddle

Answer 1

您可以将#slide1:before的内容设置为默认图像。然后，在 :hover 上，将 content 属性更改为悬停图像。

如果这样做，您需要将 img 更改为 div (或 span，而不是 img)。

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  display:inline-block;
}

#slide1:before {
  content: url("https://www.upload.ee/image/6050955/ava.png");  
}

#slide1:hover {
  position: relative;
}

#slide1:hover:after {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  position: absolute;
  z-index: -1;
}

#slide2 {
  opacity: 1;
  position: relative;
  z-index: 2;
  margin-left: 7px;
  margin-top: 0px;
}

#slide3 {
  z-index: -1;
  position: absolute;
}

<section id="header">
  <div class="inner">
    <a id="slide1" href="http://google.com" target="_blank"></a>
    <img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
  </div>
</section>

工作演示包括链接:http://output.jsbin.com/cudimos