鼠标悬停在按钮 html 上时显示文本

在 web 应用程序中，鼠标悬停在按钮 html 上时显示文本是一个常用的功能，帮助用户了解按钮的作用，提高用户体验。本文将介绍如何通过 HTML、CSS 和 JavaScript 实现这一功能。

HTML

在 HTML 中，使用 title 属性来设置鼠标悬停时显示的文本。示例代码如下：

<button title="点击这个按钮会提交表单">提交</button>

在上面的代码中，当鼠标悬停在按钮上时，会显示“点击这个按钮会提交表单”的提示。

CSS

可以使用 CSS 样式来调整鼠标悬停提示的样式。示例代码如下：

<style>
    button:hover {
        background-color: #eee;
        border: 1px solid #999;
    }
    button:hover::before {
        content: attr(title);
        background-color: #fff;
        border: 1px solid #999;
        position: absolute;
        left: 100%;
        top: 0;
        padding: 5px;
        white-space: nowrap;
    }
</style>

<button title="点击这个按钮会提交表单">提交</button>

在上面的代码中，当鼠标悬停在按钮上时，按钮的背景色和边框会变化，同时会显示带有提示文字的浮动框。使用伪元素 ::before 实现浮动框，使用属性选择器 attr(title) 获取 title 属性的值。

JavaScript

如果需要动态更改鼠标悬停提示的内容，可以使用 JavaScript。示例代码如下：

<button id="submitBtn">提交</button>

<script>
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.title = '点击这个按钮会提交表单';

    submitBtn.addEventListener('mouseover', function() {
        submitBtn.title = '这是一个新的提示';
    });

    submitBtn.addEventListener('mouseout', function() {
        submitBtn.title = '点击这个按钮会提交表单';
    });
</script>

在上面的代码中，首先通过 getElementById() 方法获取按钮元素，然后设置 title 属性。接着添加了两个事件监听器，当鼠标悬停在按钮上时，更改 title 属性的值，实现动态更改鼠标悬停提示的功能。

以上就是 HTML、CSS 和 JavaScript 实现鼠标悬停在按钮 html 上时显示文本的方法。