css,多个item,鼠标经过显示改item的内容

emoji111111

已于 2024-07-31 14:05:38 修改

阅读量150

点赞数 3

文章标签： html css 前端

于 2024-07-31 14:05:20 首次发布

本文链接：https://blog.youkuaiyun.com/emoji111111/article/details/140821039

版权

html:
      <div class="sch-title" data-text='小学'></div>
      <div class="sch-title" data-text='初中'></div>
    
css:
     .sch-title[data-title] {
          position: relative;
          width:100px;
          height:40px;
          background:#7581f8;
          &:hover:after {
             display: inline-block;
             transition: all 0.1s ease 0.5s;
             visibility: visible;
              }
              // 背景的样式 位置 字体等
          &:after {
              position: absolute;
              content: attr(data-title);
              font-size: 14px;
              color: #fff;
              text-align: center;
              padding: 0px 12px;
              top: 18px;
              left: 12px;
              white-space: nowrap;
              visibility: hidden;
              display: none;
              width: max-content;
              height: 30px;
              line-height: 30px;
              box-sizing: border-box;
              z-index: 6;
              .bg-img-100("Dialog_5.png");
              }
       }