gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:34:56 27 4
gpt4 key购买 nike

我已经解决了很多具有相似标题的已解决问题,但我尝试的似乎都没有用。

我希望将 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

最佳答案

您可以将#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

关于html - :hover and :hover:before not working properly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38870213/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com