CSS - 在悬停状态下添加另一个元素

Question

所有，

我有一个水平菜单栏。当用户将鼠标悬停在菜单栏中的每个链接上时，我想在链接下方显示一个小三角形。

这个小三角形不是图像，而是由 CSS 边框语法渲染的。下面的图像和代码：

这是三角形的 CSS 代码：

#css_arrow {
    border-color: transparent transparent rgba(111,46,11,0.0) transparent;
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    position: absolute;
    top: 34px;
    left: 78px;

我想将三角形​​添加到菜单项处于悬停状态。

有人可以建议如何将此 id 添加到悬停状态吗？我考虑过对菜单栏中的项目使用两个类，但它不起作用。这是 html 代码：

<div id="main_bar">
                <ul>
                    <li class="maintabs maintabs_tri"><a href="#">Overview</a></li><li class="maintabs maintabs_tri"><a href="#">Collar/ Neckline</a></li><li class="maintabs maintabs_tri"><a href="#">Sleeves</a>
                    <ul>
                        <li class="s_leftright"><a href="#">Left Sleeves</a></li>
                        <li class="s_leftright"><a href="#">Right Sleeves</a></li>
                    </ul></li><li class="maintabs maintabs_tri"><a href="#">Body</a></li>
                </ul>           
            </div>  

和 CSS，它不起作用：

    .maintabs_tri:hover {
    border-color: transparent transparent rgba(111,46,11,1) transparent;
    border-style: solid;
    border-width: 8px;
    position: absolute;
    height: 0;
    width: 0;
    top: 32px;
    left: 78px;
} 

Answer 1

您需要将其放置在所有项目上，但仅在悬停时显示它，即

<ul>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
   <li>
      <a href="#">Whatever <span></span></a>
   </li>
</ul>

在这种情况下，跨度将是三角形。我假设您已经正确设置了 ul 和 li 的样式。所以，在你的CSS中：

ul li a {
   display: block;
   width: 100px;
   height: 32px;
   float: left;
   position: relative;
}

ul li a:hover span {
  display: block;
}

ul li a span {
    display: none;
     border-color: transparent transparent rgba(111,46,11,1) transparent;
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
}

我将它嵌套在锚点内，因为这样可以最大化可点击区域。