Question

我正在学习html / css，正在玩这段代码here。

＆＃13;

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

＆＃13;

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

＆＃13;

我尝试编辑它以阻止下划线返回其原始位置（在margin-left：0％;），但是发现无论我做什么，下划线总是返回到其原始位置。登记/> 到目前为止，我已尝试执行以下操作：

hr {  margin-left: 25%; ...)

强行尝试将下划线移动到第二个标签。
还有以下内容：

.two:active ~ hr { margin-left: 25%; ...}

在我创建的实际html文件上，并尝试通过单击链接以这种方式移动下划线最后，我还尝试创建了两个相同的html文件，但两者之间存在以下差异：

<li class="one" id="active"><a href="#">Uno</a></li>

和

<li class="two" id="active"><a href="#">Dos</a></li>

并尝试在页面更改时尝试操作下划线但这也失败了。

我也试过看过这段代码here，但是这里有一些东西，例如“孩子”，我还没有学到所以它对我没有帮助除了让我尝试尝试上面写的第三次尝试之外，还有很多。我很想知道究竟是什么导致下划线每次都返回到它的位置，如果有一个简单的方法来修复这个特定的代码。

Answer 1

只需将其添加为悬停样式的另一个规则，其中包含额外的active类，而不包含:hover（例如.active.two ~ hr）。具有正确的特异性（并且不会破坏悬停效果）您需要为悬停选择器增加一些额外的重量。

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

li.one:hover ~ hr, .active.one ~ hr {
  margin-left: 0%;
}
li.two:hover ~ hr, .active.two ~ hr {
  margin-left: 25%;
}

li.three:hover ~ hr, .active.three ~ hr {
  margin-left: 50%;
}

li.four:hover ~ hr, .active.four ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three active"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

这是符合HTML验证的版本（在Pangloss' comment之后注意到这一点）：

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

li.one:hover ~ li hr, .active.one ~ li hr {
  margin-left: 0%;
}

li.two:hover ~ li hr, .active.two ~ li hr {
  margin-left: 25%;
}

li.three:hover ~ li hr, .active.three ~ li hr {
  margin-left: 50%;
}

li.four:hover ~ li hr, .active.four ~ li hr {
  margin-left: 75%;
}

li hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three active"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <li><hr></li>
  </ul>
</div>

Answer 2

我认为这个概念的一部分在这个页面上下划线总是返回到第一个菜单项，因为你在那个页面上 - 动画只是通常的常规悬停的替代品菜单链接的样式。

进入第二页后，您将相应地更改margin-left设置（如下面的代码段中所示），以便下划线标记当前（=第二个）页面，并在悬停时移动到其他菜单项。这是通过将margin-left hr设置为所需位置（0,25％，50％或75％）来完成的。同样的原则适用于其他页面。

编辑：其他职位的hover样式无需调整。唯一必须在其他页面上添加的是hr的不同边距设置，可以在<head>标记内的每个页面的<style>标记中完成：< / p>

<style type="text:css">
  .container hr {
    margin-left: 25%;
  }
</style>

以下是第二页的完整示例：

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.one:hover ~ hr {
  margin-left: 0;
}
.two:hover ~ hr {
  margin-left: 25%;
}
.three:hover ~ hr {
  margin-left: 50%;
}
.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin-left: 25%;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

这个菜单中的下划线是如何工作的？

2 个答案: