如何在 css 中实现像工具提示这样的东西?

连旭

我需要通过 CSS 或 Javascript 创建以下组件。 在此处输入图片说明

我会收到一个像 [{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].

并且它还支持支持如下高亮红色。在此处输入图片说明在这种情况下,它将收到一个数组,如[{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].

它还支持如下所示的点击和悬停事件。 在此处输入图片说明

其实我主要是不明白如何实现像下面小一个的形状。 在此处输入图片说明

加内什·亚达夫

在这里,解决方案仅适用于形状和悬停效果。

小提琴

<ul class="status">
  <li><a href=""><span>#</span>Status 1</a></li>
  <li><a href=""><span>#</span>Status 2</a></li>
  <li><a href=""><span>#</span>Status 3</a></li>
  <li><a href=""><span>#</span>Status 4</a></li>
  <li><a href=""><span>#</span>Status 5</a></li>
  <li><a href=""><span>#</span>Status 6</a></li>
</ul>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章