尝试使用CSS创建一个日程表项目符号导航器
尝试使用CSS创建一个日程表项目符号导航器
提问于 2016-03-18 10:50:24
这是我在这里的第一篇文章。我正在尝试制作一个水平的空项目符号列表，当鼠标经过该列表时，它将显示一个填充的项目符号。
该列表首先在HTML中使用十进制代码定义：
<ul class="btn-diaporama">
<li>•</li> <!-- filled bullet point -->
<li>◦</li> <!-- unfilled bullet point -->
<li>◦</li>
<li>◦</li>
<li>◦</li>
</ul>然后，我希望CSS中的hover事件触发一个填充的项目符号。当鼠标经过时，是否可以切换每个li的十进制值。具体地说，这会将悬停在li元素上的值从◦更改为·，这将使鼠标经过项目符号时显示为满的。有可能吗？
谢谢，杰夫
回答 2
Stack Overflow用户
发布于 2016-03-18 11:49:46
这可以使用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
Stack Overflow用户
发布于 2016-03-18 13:04:53
对于只有项目符号而没有文本的列表：
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: "●";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36075292
复制相关文章
相似问题
腾讯云开发者
