Question

我有一个简单的家庭作业网页。每周都有鼠标悬停按钮，鼠标悬停时它们会更改颜色。很老了！

现在这不是广告，我与他们无关，除了，我一次又一次玩乐透here。（仅显示按钮。）

他们在西班牙当局遇到问题，并且离线了一段时间。现在，他们又回来了，它具有很酷的滚动按钮，可以充满填充物。

我的网页非常简单，但是我有一些滚动按钮，就像链接中一样。

任何人都可以给我一个指针，链接，提示如何完成此操作吗？

Answer 1

您需要使用:after元素并将其height转换到:hover上。

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>

如何制作洪水填充转换按钮？

1 个答案: