尝试使用CSS制作Diporama项目符号列表导航器

这是我在这里的第一篇文章。我试图制作一个水平的空项目符号列表，当鼠标经过它时，它将显示一个填充的项目符号

列表首先使用十进制代码在HTML中定义：

<ul class="btn-diaporama">
   <li>&#8226;</li> <!-- filled bullet point -->
   <li>&#9702;</li> <!-- unfilled bullet point -->
   <li>&#9702;</li>
   <li>&#9702;</li>
   <li>&#9702;</li>
</ul>

•
◦
◦
◦
◦

然后，我希望CSS中的悬停事件触发一个填充的项目符号。当鼠标经过每个li时，是否可以切换其十进制值。具体地说，这会将鼠标悬停在li元素上的值从◦更改为•，当鼠标经过该元素时，该元素会使项目符号显示为已满。可能吗

谢谢，

---

Jeff

这可以使用CSS

列表样式

属性来实现

CSS

ul li {
  /* unfilled bullet point */
  list-style: circle;
}

ul li:hover {
  /* filled bullet point */
  list-style: disc;
}

---

代码笔解决方案：

对于只包含项目符号而不包含文本的列表：

HTML

---

谢谢这是如此简单，我几乎感到惭愧与相对和绝对定位工作。但我的问题是，我只想要子弹，没有相关的文本。我最终找到了以下解决方法：没问题，很乐意帮忙。完成后，请记住标记正确答案，即使答案是您自己的：）

<ul class="btn-diaporama">
   <li><span class="bullet">○</span></li>
   <li><span class="bullet">○</span></li>
   <li><span class="bullet">○</span></li>
   <li><span class="bullet">○</span></li>
   <li><span class="bullet">○</span></li>
</ul>

    section ul li{
        display: inline;
        position: relative;
        color: #959595;
    }

    section ul li .bullet:hover:before {
        position: absolute;
        color: #636363;
        content: "●";
    }