vue 使用html自带title属性鼠标悬浮展示内容修改其样式

最新推荐文章于 2025-05-28 10:35:16 发布

原创最新推荐文章于 2025-05-28 10:35:16 发布 · 4.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

这篇博客详细解析了如何使用CSS实现数据标题提示功能，通过创建公共样式`css-common-common.css`，利用`data-title`属性和CSS伪元素`:hover:after`来展示元素的title信息。内容涉及`position`、`content`、`background-color`等关键样式属性，以及过渡效果和阴影设置，为网页元素添加优雅的悬停提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公共样式 css-common-common.css文件下
.listboxs {   // 最外层容器 用来包裹需要展示 title 属性的
  .title[data-title] {  // data-title 在我们需要加title属性的标签内 换成 data-title='张三'
    position: relative;
 
    // 样式：
    &:hover:after { 
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
    }
    // 具体控制title背景的样式 位置 字体等
    &:after {
      content: attr(data-title);
      background-color: rgba(80, 79, 79, 0.8);
      color: #fff;
      font-size: 13px;
      position: absolute;
      padding: 4px 10px;
      left: 20px;
      bottom: -1.5em;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
      z-index: 99999;
      visibility: hidden;
      opacity: 0;
    }
  }
}