前端小测第二期(css基础)

前端小测-css 小测第二期题目:

一个简单也很常用的 tips 功能,鼠标放到图片上面悬浮提示效果.如下图所示:

图片悬浮提示效果

已知 HTML 代码结构如下:

1
2
3
4
5
6
7
8
<a
href="javascript:void(0);"
class="icon-delete css-tips"
data-title="删除"
role="button"
>
删除
</a>

使用 css 实现如下图所示样式效果,鼠标放上效果(hover 图表显示 tips 提示,提示文字源自于 data-title 属性) 可以尝试一些边界场景的情况

请开始你的表演~

demo 地址:

访问 demo 页面