悬停工具提示 - 分步指南
悬停工具提示 - 分步指南
HTML
对于 HTML，我们只需要一个包含按钮和 div 元素的容器，其中包含“工具提示”类和文本。
<div class="container">
<button>悬停我！</button>
<div class="tooltip">这是一个工具提示</div>
</div>
CSS
对于 CSS，首先我们将使用 flexbox 对齐所有内容。
。容器 {
高度：100%；
显示：弯曲；
弹性方向：列；
对齐项目：居中；
证明内容：中心；
}
现在我们将为按钮设置样式。我们将颜色和边框半径设置为 20px。
然后添加一些填充和光标到指针。
我们将 z 索引设置为 1，因此该元素位于“工具提示”元素的顶部。
最后，过渡，以便我们稍后添加的悬停效果非常流畅，字体大小为 20 像素。
按钮 {
背景颜色：rgba(0, 0, 0, 0.652);
边框：1px 实心 rgba(117, 255, 211, 0.928);
边框半径：20px；
填充：10px 50px；
颜色：rgba(117, 255, 211, 0.928);
光标：指针；
z-index：1；
过渡：0.3s；
字体大小：20px；
}
悬停按钮会增加一点。
不要忘记过渡。
按钮：悬停{
变换：比例（1.1）；
过渡：0.3s；
}
对于工具提示，首先，我们将不透明度设置为零。我们稍后将在按钮悬停时将其设置为 1。
现在我们将设置一些基本样式（颜色、边框）以及填充和边距。
然后我们将位置设置为相对，通过过渡缩放到 0.1，以便在悬停时平滑地增加大小。
.tooltip {
不透明度：0；
背景色：rgba(0, 110, 75, 0.404);
边框半径：10px；
填充：5px 15px；
边距顶部：10px；
颜色：rgba(255, 255, 255, 0.652);
位置：相对；
变换：缩放（0.1）translateY（-50px）；
过渡：0.3s；
}
使用 before 伪元素，我们将为工具提示创建一个指向按钮的箭头。
我们将通过将内容和位置设置为绝对来创建它。
我们将宽度和高度设置为 10 像素，并使用剪辑路径创建一个三角形，我们将使用变换旋转将其旋转 45 度。
然后我们将使用 top 和 left 属性将它对齐到工具提示的顶部。
.tooltip::before {
内容： '';
位置：绝对；
宽度：10px；
高度：10px；
背景色：rgba(0, 110, 75, 0.404);
剪辑路径：多边形（0 0, 0% 86%, 86% 0）；
边框半径：1px；
顶部：0；
左：50%；
变换：平移（-50%，-4px）旋转（45度）；
过渡：0.3s；
}
现在我们将在按钮悬停时简单地将工具提示的不透明度设置为 1，然后缩放到它的原始大小 (1)。
按钮：悬停 + .tooltip {
不透明度：1；
变换：缩放（1） translateY（0px）；
过渡：0.3s；
}
就是这样。
您可以通过视频教程找到完整代码 这里 .
感谢您阅读本文。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
