首页 > 其他 > 详细

模拟title自定义样式

时间:2021-05-25 22:29:59      阅读:17      评论:0      收藏:0      [点我收藏+]

html的title是无法自定义样式的

解决方法:通过伪元素模拟一个自定义的title

html:

  定义一个data-title属性

<div class="order_type" v-for="item in journal_type_options":data-title=‘item.template_memo‘ :key="item.template_id">
</div>

css:

  通过hover显示来模拟tilte

  .order_type:hover::after {
    content: attr(data-title);
    position: relative;
    bottom: -1px;
    left: 15px;
    text-align: center;
    height: 24px;
    line-height: 22px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 2px;
    color: #F40;
  }

 

模拟title自定义样式

原文:https://www.cnblogs.com/webwangjie/p/14809981.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!