css content 的 attr 用法 （实现悬浮提示）

content 的attr 实现 鼠标悬浮 显示 悬浮提示，

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

方法/步骤

1. 1

   <div>

       <span data-tooltip="hello world">Hover Me!!!</span>

   </div>

2. 2

   css如下

   body{
     padding: 100px;
   }
   span{
     position: relative;
     display: inline-block;
     &:hover{
       cursor: pointer;
     }
     &:hover:before{
       content: attr(data-tooltip);
       background-color: #d9444a;
       color: #fff;
       padding:.8em 1em;
       position: absolute;
       left: 100%;
       top: -70%;
       margin-left: 14px;
       white-space:pre;
     }
     &:hover:after{
       content: '';
       position: absolute;
       left: 108%;
       top: -70%;
       width: 0;
       height: 0;
       border-right:8px solid #d9444a;
       border-top:8px solid transparent;
       border-bottom:8px solid transparent;
     }
   }

    

3. 3

   data-  为自定义属性，如上 自定义 提示 data-tooltip ="hello world",

   配合   before ，after 使用 content 的attr 调用 自定义提示，

   content: attr(data-tooltip);

4. 4

   鼠标悬浮显示效果图如下：

   

转载于:https://www.cnblogs.com/hjsblogs/p/5371232.html