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

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;
}