我一直试图将这张图片放在它的父级按钮下面,这样按钮就覆盖了图像的一部分,like this和not this,这样图像的底部就会弹出到按钮下面.
我try 使用z-index并将两者都设置为相对位置,但似乎没有任何作用,即使Inspect元素显示按钮的z-index高于图像.
这是这两个项目的html代码.Id用于悬停效果,应忽略.
<a href="film.html">
<button id="!01Hover" type="button" class="block link">
<div id="!01HoverChild" class="hoverUp">FILM</div>
<img src="static/assets/logos/logoHOME1k.webp" id="!01HoverChildLogo" class="navbarLogo" onclick="location.href='./index.html'" alt="Logo">
</button>
</a>
以下是上述代码的相关css:
.block {
display: block;
position: relative;
width: 10.6vw;
height: 6vw;
line-height: 1.5vw;
border: none;
background-color: #333;
padding: 2.1vw 0vw 2.1vw 0vw;
font-size: 1.275vw;
cursor: pointer;
color: #FFF;
font-family: Roboto, sans-serif;
text-decoration: none;
transition-property: all;
transition-duration: 0.75s;
font-weight: bold;
filter: brightness(100%);
z-index: 5;
}
.hoverUp{
transition-property: all;
transition-duration: 0.75s;
transform: translateY(0vw);
pointer-events: none;
}
.navbarLogo{
position: relative;
margin: 0vw 0vw 0vw 0vw;
align-items: center;
transform: translate3d(0,0,0);
transition-property: all;
transition-duration: 0.75s;
height:auto;
width: 80%;
z-index: 1;
}
.link用于光标,与定位无关.