JS和CSS做提示框

最新推荐文章于 2024-04-20 14:57:38 发布

m0_47733284

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量77

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_47733284/article/details/134976877

版权

JS和CSS做提示框

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="tooltip" title="这是一段没展示全的信息">这是一段没展示全的信息</div>
</body>
<style>
    .tooltip {
        position: relative;
        display: inline-block;
      }
      
      .tooltip:hover::after {
        content: attr(title);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        background-color: #000;
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
      }
      
      .tooltip:hover::after {
        opacity: 1;
        visibility: visible;
      }
      
      .tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        background-color: #000;
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }
</style>
</html>

你需要为需要展示全信息的元素添加一个title属性，该属性的值就是需要展示的完整信息。

然后，使用CSS的:hover伪类来设置鼠标放上去时的样式，并使用::after伪元素来创建一个提示框。