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元素上将值从＆amp;＃9702更改为＆amp;＃8226，这会使鼠标在鼠标经过时显得满。可能的？

谢谢，杰夫

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

Answer 2

对于仅包含项目符号的列表，没有文字：

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>

CSS：

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

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

尝试使用CSS制作diaporama子弹列表导航器

2 个答案: