css 鼠标移动有提示信息

CSS是网页开发中非常重要的一部分，它用于美化页面、布局和交互效果等等。今天，我们将学习如何使用CSS实现鼠标移动时有提示信息的交互效果。

css 鼠标移动有提示信息

我们先来看一下代码：

    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
    <body>

        <h2>鼠标移动有提示信息效果示例</h2>

        <p>将鼠标指向下面这个单词，会有一个提示信息出现。</p>

        <div class="tooltip">CSS
            <span class="tooltiptext">层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言下的一个应用）或XML（标准通用标记语言的子集）等文件样式的计算机语言。</span>
        </div>

    </body>

上面的代码包含了两个类：tooltip和tooltiptext。所选取的元素div是具有类"tooltip"的一个元素，将鼠标悬停在该元素上时，将显示具有类"tooltiptext"的元素的内容。

我们设置类"tooltip"的元素的position为relative，以便我们可以在它自身的区域内定位类"tooltiptext"的元素。这个类"tooltiptext"的元素被设置为visibility:hidden，这样它就默认是不可见的。当.hover时，我们设置visibility为visible，将该元素显示在页面上。

所以，当鼠标悬停在"CSS"单词上时，将显示一个白色黑色的提示框，显示了Cascading Style Sheets的意思。

好了，以上就是CSS实现鼠标移动有提示信息的方法了。祝你使用愉快。

css 鼠标移动有提示信息

相关推荐