JavaScript实现鼠标滑到button上时，展示提示文字

大个个个个个儿

于 2024-08-09 15:35:05 发布

阅读量300

点赞数 3

分类专栏： javascript js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40269801/article/details/141063375

版权

javascript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cursor with Text Example</title>
<style>
  .button {
    position: relative;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }

  .button::before {
    content: attr(data-tooltip);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .button:hover::before {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>
<button class="button" data-tooltip="不可选">点击我</button>
</body>
</html>