4

我正在拔头发，试图做一个非常非常简单的效果。这是我想要的样子：

链接下的 CSS 三角形

当您将鼠标悬停在文本链接上时，我希望在此行下方出现一个橙色的小三角形。我发现的所有回复都使用 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;
  }
4

2 回答 2

5

您可能确实想使用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 ▲。当然，这可以用 abackground-image: url(...)或您需要的任何东西代替。

编辑2：

请参阅此版本的 JSFiddle。我没有将边框放在 the 上a（这导致了一个奇怪的不断扩大的宽度问题），而是将它放在了div包装上a并添加了边距和填充到 that 上div，然后给了“箭头” aheight: 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>

于 2013-09-27T07:21:11.563 回答
0

请尝试以下代码

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>
于 2013-09-27T07:29:54.170 回答