我有一个简单的作业网页。它每周都有滚动按钮,它们会在鼠标悬停时改变颜色。很老了!
现在这不是广告,我与他们无关,除了我偶尔玩乐透 here . (只是为了显示按钮。)
他们与西类牙当局发生了问题,并离线了一段时间。现在他们又回来了,有很酷的翻滚按钮,可以淹没。
我的网页非常简单,但我有滚动按钮,就像链接中一样。
谁能给我一个关于如何完成的指针、链接和提示?
最佳答案
您需要使用 :after
元素并在 :hover
上转换它的 height
。
z-index
将确保您的颜色位于框内内容的后面。
我在这里为您创建了一个示例:
li {
position: relative;
border: 1px solid lightgrey;
height: 100px;
width: 100px;
}
li a {
z-index: 20; /*this will keep your content above the colour*/
position: relative;
}
li:after {
z-index: 10; /*this will keep your colour behind the content*/
background-color: #bf1f1f;
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 5px;
width: 100%;
transition: height .3s; /*creates smooth animation*/
}
li:hover:after {
height: 100%; /*toggling the height to 100% on hover of the box*/
}
<li><a href="/">Example List Item</a></li>
这是一个包含多个元素的示例:
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li {
position: relative;
border: 1px solid lightgrey;
height: 100px;
width: 100px;
}
li a {
z-index: 20;
/*this will keep your content above the colour*/
position: relative;
}
li:after {
z-index: 10;
/*this will keep your colour behind the content*/
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 5px;
width: 100%;
transition: height .3s;
/*creates smooth animation*/
}
li:hover:after {
height: 100%;
/*toggling the height to 100% on hover of the box*/
}
li:nth-child(1):after {
background-color: #c50202;
}
li:nth-child(2):after {
background-color: #4444de;
}
li:nth-child(3):after {
background-color: #279027;
}
li:nth-child(4):after {
background-color: #e07832;
}
li:nth-child(5):after {
background-color: #c50202;
}
li:nth-child(6):after {
background-color: #4444de;
}
li:nth-child(7):after {
background-color: #279027;
}
<ul>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
<li><a href="/">Example List Item</a></li>
</ul>
关于html - 如何制作洪水填充翻转按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55295393/