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

Posted 2023-05-08

【中文标题】悬停时链接下的 CSS 三角形（没有 UL/LI/SPAN）？

【英文标题】：CSS Triangle Under Link On Hover (WITHOUT UL/LI/SPAN)?

【发布时间】：2013-10-03 09:37:26

【问题描述】：

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

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

【参考方案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 上（这会导致奇怪的不断扩大的宽度问题），而是将它放在包裹a 的div 上，并在div 上添加边距和填充，然后给出"箭头" a 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>

【讨论】：

感谢您的回答！但是，如果我在不将第二行放在线下时使用它，它只会使线向下颠簸。如果我对那里的第二行执行此操作，则根本没有显示任何内容。

@JacquelynLaraeChastain 我已经更新了答案并使用解决方案创建了一个 JSFiddle。

再次感谢您！然而，这是我已经达到的重点......这真的很棒，但我需要在链接和三角形之间有一条细白线，如我链接到的图片所示。这就是我的全部问题所在。我唯一的其他选择是绝对定位这条线，这是我做不到的：这个网站是响应式的。

@JacquelynLaraeChastain 您可以使用border-bottom 在a 上使用左右填充来获得这种效果。

甜蜜！我让它工作。我将在我的顶帖中展示我的修复。不可能和你一起做。非常感谢！

【参考方案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>

【讨论】：

Vineesh，就像我在帖子中所说的那样，我无法将 ul 方法用于我正在尝试做的事情。我已经尝试过了，它不适用于我试图在箭头出现的区域和链接本身之间放置的线。不过，我非常感谢您的回答。

很抱歉，这与我解释的内容或图片中显示的内容不太接近。这也不能解决我需要它之间的界线的问题。