html - 悬停时链接下的 CSS 三 Angular 形(没有 UL/LI/SPAN)？

Question

我正在努力尝试做一个非常非常简单的效果。这是我想要的样子:

当您将鼠标悬停在文本链接上时，我希望该行下方出现一个橙色的小三 Angular 形。我发现的所有响应都使用 ul 和 li 来完成这项工作，但这不是我设置代码的方式，也不适用于我正在做的事情。

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

  <div class="row"><div class="large-9 large-centered columns show-for-medium-up rectangle">&nbsp;</div></div>

我正在使用 foundation 4 构建这个站点。因为我希望我的链接以某种方式设置并且我希望我的链接下方有这条白线，所以我不能使用 ul/li 方法来获得三 Angular 形悬停，或者即使是我找到的非常好的 display: block; 方法，但对我来说根本不起作用。我想如果我在这两个部分下复制这个部分:

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
    </div>
  </nav>

这应该有效。这是我目前拥有的 css。

.mainnav a {
font-family: "Quicksand", Verdana, sans-serif;
color: #8cc63f;
font-size: 1.75em;
}
.mainnav a:hover {
color: #c97932;
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #c97932;
margin: 25px auto;
display: none;
}
.mainnav a:hover + .arrow {
display: block;
}

显然 display: block; 方法无法工作，因为这些元素不是并排的。请帮忙解决这个问题!我已经不得不放弃我想要这样做的滑动 js 动画，因为我无法弄清楚......:( 提前谢谢你!

请允许我用矩形类的这一行来澄清一下。 这就是全部，但它必须位于链接和三 Angular 形出现的区域之间。这就是 ul/li 方法不起作用的原因。

.rectangle {
    height: 1.5px;
    background-color: #fff;
    position: relative;
    // margin: 1% 0% 3% 0%;
}

正在解决我的问题!

HTML

  <nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns underline">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

CSS

   .mainnav {
    height: 100px;
  }

  .mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
  }

  .mainnav a:hover {
    color: #c97932;
  }

  .mainnav a, .mainnav a:hover{ text-decoration:none;}
  .mainnav a:hover:after {
    display: block;
    position:relative;
    top:10px;
    width:100%;
    height:0;
    text-align:center;
    content : "\25B2";
    color: @orange;
  }

  .underline {
    margin: 10px 0px; 
    padding: 5px 0px;    
    border-bottom:2px solid #fff;
    overflow:visible;
  }

Answer 1

您可能确实想使用 display:block; ，但是，您需要定位元素，使其位于线条下方。

.mainnav a:hover + .arrow {
    display: block;
    position: relative; /* you could also try 'absolute' here */
    top: -50px; /* this will be how far down you want the triangle */
}

编辑:

我创建了一个 JSFiddle展示。我必须添加一些 CSS 定义，以便它的其余部分能够像描述的那样显示。

为了后代，这里有相关的规则:

.mainnav a, .mainnav a:hover{ text-decoration:none;}
.mainnav a:hover:after {
    display: block;
    position:relative;
    width:100%;
    text-align:center;
    content : "\25B2";

    color:yellow;
}

.columns {float : left; margin:10px;}

content : "\25B2";插入 unicode ▲。这当然可以用 background-image: url(...) 代替或者任何你需要的东西。

编辑 2:

参见 this version of the JSFiddle .而不是将边框放在 a 上(这导致了一个奇怪的不断扩大的宽度问题)，我把它放在 div 上包裹着 a并为 div 添加边距和填充，然后给“箭头”一个height: 0;这样盒子就不会在 :hover 上展开.

这里是完整的解决方案:

.mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
}
.mainnav a:hover {
    color: #c97932;
}
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c97932;
    margin: 25px auto;
    display: none;
}
.mainnav a, .mainnav a:hover {
    text-decoration:none;
}
.mainnav a:hover:after {
    display: block;
    position:relative;
    top:5px;
    width:100%;
    height:0;
    text-align:center;
    content :"\25B2";
    color:#c97932;
}
.columns {
    float : left;
    margin:0;
    padding:5px 10px;
    border-bottom:1px solid #f00;
    overflow:visible;
}

<nav class="mainnav">
    <div>
        <div class="columns"><a href="#">Work</a></div>
        <div class="columns"><a href="#">About</a></div>
        <div class="columns"><a href="#">Contact</a></div>
        <div class="columns"><a href="#">Blog</a></div>
    </div>
</nav>