Question

我正在使用wordpress和Divy主题设置一个网站，因为我需要将其交给那些在我完成后不会编码的人。

我的问题是我试图在侧面导航栏上添加标签，这些标签显示在悬停点的左侧。 Here是一个示例网站，其中包含我正在使用的相同侧栏。

导航栏的结构如下：

<ul class="et_pb_side_nav et-visible" style="margin-top: -100px;">
     <li class="side_nav_item">
       <a href="#" id="side_nav_item_id_0" class>0</a>
     </li>
     <li class="side_nav_item"><a href="#" id="side_nav_item_id_1" class="">1</a>
     </li>
     <li>
     etc...
     </li>

我设法在悬停时加厚条形并将点（元素）保持在同一位置：

ul.et_pb_side_nav:hover {
   width: 100px;
}
ul.et_pb_side_nav:hover .side_nav_item a {
   margin-left: 60px;
   margin-right: 0px;
}

但我无法弄清楚如何在点的左侧显示标签。我已经尝试了很多这样的方法：

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
  content: “About Us”;
  position: absolute !important;
  top: 0;
}

但是没有任何成功。如何获得那些标签的任何想法将非常感激。谢谢你的帮助！

更新：This person设法用标签取代了这些点，但仍然没有想出如何保留点数，只是在悬停时调出这些标签，尽管它帮助我获得了近。

Answer 1

你想要这样的东西吗？

ul {
  position: absolute;
  right: 100px;
  height: 100%;
  width: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
ul li.et_pb_side_nav {
  list-style: none;
  text-align: right;
}
ul li.et_pb_side_nav:after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  display:inline-block;
}
ul li.et_pb_side_nav a {
  font-size:0px;
  transition:all 180ms ease-in;
}
ul li.et_pb_side_nav:hover a {
  font-size:14px;
}

<ul>
  <li class="et_pb_side_nav"><a href="#">First</a>
  </li>
  <li class="et_pb_side_nav"><a href="#">Second</a>
  </li>
  <li class="et_pb_side_nav"><a href="#">Third</a>
  </li>
</ul>

将标签添加到Divy侧导航

1 个答案: