我不知道应该如何隐藏 :before 元素,并且仅当它位于按钮 div“内部”时才使其可见,以便在悬停按钮上创建填充效果。
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
<a href="#" class="button">buttt</a>
最佳答案
将 :before
元素高度设置为 0
,然后在 :hover:before
上将其更改为 100%
片段
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 0;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
height:100%;
}
<a href="#" class="button">buttt</a>
关于html - 隐藏 :before on :hover button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47248025/