：悬停和：悬停：在不能正常工作之前

Question

我已经通过类似标题解决了很多已解决的问题，但我尝试的任何内容似乎都没有。

我希望ava.png图片重定向到另一个页面，但在悬停时我想要显示:before图片（ava_background_hoover.png）。

我可能会说这一切都错了，但这是我到目前为止所做的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

工作演示，包括链接：javadoc of ComboBox

Answer 2

:before和:after pseudo-element用于在元素内容之前或之后插入内容。 img没有内容。因此，您无法在pseudo-elements上使用img。

相反，您应该将<div>与#slide1和#slide2一起使用，img或background-img使用divs，你选择。

我在下面做了一个简单的例子。单击以显示片段。让我知道它是否有帮助

P.S。你可以根据自己的需要定位:before。我猜对了你的想法

＆＃13;

＆＃13;

#slide1,#slide2 { display:inline-block}

#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;
    right: -150%;
    bottom: -150%;
	}


			

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;