悬停链接下的CSS三角形（没有UL / LI / SPAN）？

Question

我拉着我的头发试图去做一个非常非常简单的效果。这就是我想要的样子：

当您将鼠标悬停在文字链接上时，我希望在此行下方显示一个小的橙色三角形。我发现的所有响应都使用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>

我正在使用基础4构建此站点。因为我希望我的链接以某种方式设置并且我希望在我的链接下面有这条白线，我不能使用ul / li方法来获得三角形悬停，或者即使是我发现的一种非常好的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动画，因为我无法理解...... :(提前谢谢你！

请允许我用这个矩形类来澄清这一行。 这就是全部，但必须在链接和三角形出现的区域之间进行。这就是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并添加了边距和填充{ {1}}，然后给出了＃34;箭头＆＃34;一个div，以便该框不会在height: 0;上展开。

以下是完整的解决方案：

＆＃13;

＆＃13;

:hover

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下代码

<强> HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Nav</title>
</head>
<body>
<nav>
  <div class="mainnav">
    <div class="list-item"><a href="#">Work</a><div class="arrow"></div></div>
    <div class="list-item"><a href="#">About</a><div class="arrow"></div></div>
    <div class="list-item"><a href="#">Contact</a><div class="arrow"></div></div>
    <div class="list-item"><a href="#">Blog</a><div class="arrow"></div></div>
  </div>
</nav>
</body>
</html>

<强> CSS：

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

.mainnav > .list-item {
    display:inline-block;
}
.columns 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: block;
    position:relative;
    bottom:25px;
    display: none;
}
.mainnav .list-item a:hover + .arrow {
    display: block;
}
</style>