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

Question

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

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

现在，为了便于说明，我将其下方的小箭头留出了空白。与现在一样，它只是一个单独的 <img> 放置在导航栏下方，并对其应用边距以使其看起来像是在其下方。

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

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

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

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

设置为

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

然后创建

.nav img:hover {
 visiblity: visible;
}

现在有多个问题。

1) 这意味着，人们需要将鼠标悬停在其下方的箭头上，而不是实际的导航栏项目上才能显示。

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

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

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

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

Answer 1

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

这是一个 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;
}

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

Creatng a navigation bar with illusion of a following selector

html

css