html - 创建一个带有跟随选择器幻觉的导航栏

Question

我正在做我的一个元素，我有一个相对有趣的想法，看起来很不错，唯一的问题是，我真的不知道如何实现它。

这是交易。我已经设置了导航栏，它看起来像这样

现在为了说明的目的，我已经把它下面的小箭头划掉了。和现在一样，只有一个人<img>放置在导航栏下方，并为其应用边距，使其看起来像是在其下方。

基本上我想要完成的是，每当您将鼠标悬停在导航栏的某个部分上时，箭头就会移动到它下面。为了本文的简单性和可读性，我们不讨论任何动画和平滑度，实际上我想要的只是箭头从原始位置消失并重新出现在所需(悬停)位置下。

有什么建议是最好(也是最简单)的方法吗？

理想情况下，我更喜欢只使用 HTML/CSS。

可能我到目前为止唯一的解决方案是为导航栏内的每个元素创建一个单独的箭头。

设置为

.nav img {
 display: inline-block;
 visbility: hidden;
}

然后创建

.nav img:hover {
 visiblity: visible;
}

现在有很多问题。

1) 这意味着，人们需要将鼠标悬停在其下方的箭头上，而不是实际的导航栏元素上，它们才会出现。

2) 我需要手动为每个箭头留出边距，以便它们适合每个菜单项。

3) 虽然这在我的屏幕上可行，但如果您切换到任何不同的分辨率，它们的边距将会关闭。

如果你们有任何建议，我很想听听。

---

---

编辑: 我实际上想出了一个解决方案，我可以简单地创建一个下拉菜单(另一个 ul)，然后将图像放在那里。不过，如果您还有任何更直观、更有效的解决方案，我会很乐意查看它们。

Answer 1

如果我正确理解您的问题，您可以通过执行以下没有任何图像的操作来实现此目的。我添加了 active 类，并赋予它一种独特的颜色以显示您当前正在查看的页面，然后悬停效果将以不同的颜色显示。选择器将是一个带有纯 css 三 Angular 形的伪元素，并将在悬停时显示。

这是一个 fiddle ，向您展示了这一点 Fiddle

和标记:

<nav>
  <ul>
    <li><a class="active" href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

和这样的CSS:

nav{
  text-align: center;
  background: #000;
}
nav ul{
  list-style-type: none;
  padding: 0;
  margin:0;
}
nav li{
  display:inline-block;
  position: relative
}
nav li a{
  color: #fff;
  padding: 10px;
  display: inline-block;
  text-decoration: none;
}
nav li a:before{
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgba(200,200,200,1);
  position: absolute;
  bottom:-20px;
  left:0;right: 0;
  margin: 0 auto;
  content:'';
  opacity: 0;
  -ms-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  -webkit-transition: opacity 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
nav li a.active:before{
  opacity: 1;
  border-top: 20px solid red;
}
nav li a:hover:before{
  opacity: 1;
}