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

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

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

图片悬浮提示效果

已知 HTML 代码结构如下:

<a
  href="javascript:void(0);"
  class="icon-delete css-tips"
  data-title="删除"
  role="button"
>
  删除
</a>

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

请开始你的表演~

demo 地址: