Question

将鼠标悬停在链接上时如何创建向下箭头（三角形）？

类似于CodePen上的结果标签，请参阅here

我试图按照上面的教程创建三角形，但没有运气

 a{
  background: red;
    float: left;
    width: 30%;
    padding: 5px;
    display block
  }

  a:hover {background: green;}

Answer 1

我不确定你的意思，但这可能就是答案：

的CSS：

.arrow_down_on_hover{
  position: relative;
}
.arrow_down_on_hover:before{
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  display: none;
  border-top: 20px solid #f00;
  position: absolute;
  right: 50%;
  margin-right: -10px;
  bottom: -20px;
}
.arrow_down_on_hover:hover:before{
  display: block;
}

HTML：

<a class="arrow_down_on_hover" href="#!">hover me</a>

示例：

http://codepen.io/eboye/pen/zBYzav

Answer 2

＆＃13;

a:hover .arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

＆＃13;

<a>link<div class="arrow-down"></div></a>

＆＃13;

Answer 3

下面的代码只是按照您在问题中链接的教程

但由于您使用的是a链接，因此必须将其设置为块级别display:block，因为它是内联元素

＆＃13;

a {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
  display:block
}
a:hover {
  border-top: 20px solid green
}

＆＃13;

<a href="">Hover me</a>

＆＃13;

如果只是在悬停某个链接时显示/隐藏三角形的问题，更好的方法是使用伪元素::before / ::after以及unicode向下箭头符号

＆＃13;

a:hover::after {
  content: "\25bc";
  color: green
}

＆＃13;

<a href="">Hover me</a>

＆＃13;

Answer 4

也许您可以使用the arrow down symbol：

a::after {
  content: '\25bc'; 
  color: red;
}

a:hover::after {
  color: green; 
}

<a>Hover me!</a>

您还可以使用实体▼在HTML中而不是CSS中指定相同的字符。

CSS - 三角形向下

4 个答案: