CSS

Question

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

类似于 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

下面的代码只是按照您在问题中 link 编辑的教程，

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

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
}

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

如果这只是 show/hide 悬停某些 link 时三角形的问题，更好的方法是使用伪元素 ::before/::after 以及unicode 向下箭头符号

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

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

Answer 3

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

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

Answer 4

也许你可以使用 the arrow down symbol:

a::after {
  content: 'bc'; 
  color: red;
}

a:hover::after {
  color: green; 
}

<a>Hover me!</a>

您还可以在 HTML 中指定相同的字符而不是 CSS，方法是使用实体：▼.

CSS - 三角形向下

CSS - Triangle down

html

css-shapes