向悬停的活动元素中添加底部箭头/三角形

Question

我有一个显示为<ul>的inline-block，当元素处于活动状态时，需要它显示一个箭头，请参见屏幕快照：

​

​

以下是我目前的情况：

​

​

我已经具备了在悬停时激活元素的功能：

.coffee

$(".solutions-items li").hover ->
  $(this).addClass("solutions-items-active").siblings().removeClass "solutions-items-active"

我的.html

<div class="text-center">
    <ul class="solutions-items">
      <li class="solutions-items-active"><img class="home-solutions-icon" src="" alt="online shop"></li>
      <li><img class="home-solutions-icon" src="" alt="mobile smartphone"></li>
      <li><img class="home-solutions-icon" src="" alt="couch commerce tablet"></li>
      <li><img class="home-solutions-icon" src="" alt="pos point of sale"></li>
      <li><img class="home-solutions-icon" src="" alt="marketplace"></li>
      <li><img class="home-solutions-icon" src="" alt="wearables"></li>
      <li><img class="home-solutions-icon" src="" alt="e-commerce innovations"></li>
    </ul>
  </div>

这是我的css：

.scss

.solutions-items li {
  display: inline-block;
}

.home-solutions-icon {
  height: 7em;
  padding: 0.5em;
}

.solutions-items-active {
  background: $green;
}

我有什么办法解决这个问题吗？谢谢！

Answer 1

您可能只是想添加一些CSS来完成这个任务。如果您的图像有固定大小，则有一个CSS技巧可以这样做：

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}