css - 尝试用 CSS 制作一个 diaporama 元素符号列表导航器

Question

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

列表首先使用十进制代码在 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 元素上的值从 ◦ 更改为 •，这会使元素符号在鼠标经过它时显示为已满。可能吗？

谢谢，杰夫

Answer 1

这可以使用 CSS list-style 属性来实现。

CSS

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

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

Codepen 解决方案:http://codepen.io/anon/pen/bpgjJr