纯CSS绘制会话气泡

吴小花的博客

于 2021-10-29 14:02:33 发布

阅读量497

点赞数

分类专栏： Css3 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/121033406

版权

Css3 专栏收录该内容

16 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何使用纯CSS技巧创建一个会在鼠标hover时显示的对话气泡提示。通过HTML结构和CSS样式，实现了一个功能完备且视觉效果良好的交互式气泡提示组件。

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

效果如下：

鼠标hover锁的时候出现气泡提示。

html结构

<div class="lock">
      <i class="el-icon-lock" ></i>
 </div>
<div class="lockTips">修改URL可能会导致关键词排名的浮动，
流量的波动等问题，非必要<span>不建议修改</span>
</div>

css样式

// 锁
.lock {
  position: absolute;
  right: 6px;
  top: 2px;
  .el-icon-lock {
    font-size: 20px;
    color: #666;
  }
}
.lock:hover {
  cursor: pointer;
}
//hover的时候对兄弟节点操作
.lock:hover + .lockTips {
  display: block;
}
.lockTips {
  width: 524px;
  line-height: 40