CSS3如何将"悬浮提示"功能玩出花样（自定义）

Posted 2021-04-09 小郑搞码事

文章开始先看一个将要实现的效果-悬浮提示。

上面效果，传统的做法就是使用title属性来实现。 下面这样：

传统的做法可控性不强，使用起来有点僵硬，如果想要自定义一个悬浮提示，那就得使用CSS3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。

html代码如下：

<div class="tips" data-title="小郑是搞码的">小郑是干嘛的?</div>

CSS代码如下：

.tips{

  color:red;

  margin:120px;

  position:relative;

}

.tips:hover::after{

  content:attr(data-title);

  display:inline-block;

  padding:10px 14px;

  border: 1px solid #ddd;

  border-radius:5px;

  color:#333;

  position:absolute;

  top:-50px;

  left:-30px;

}

悬浮提示效果完全可以自定义。当然元素hover的时候，在元素尾部添加一个内容是元素data-title的属性值。