数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中鼠标悬停显示底部隐藏文本
排版用于网页设计以吸引用户，传达信息并产生视觉效果。与印刷排版相比，数字排版为网页设计师提供了更大的流动性和多功能性。它是用户界面设计中的一个关键要素。它有助于构建强大的视觉层次结构，建立网站的整体基调，并取得良好的审美平衡。
除了提高可读性和可访问性之外，排版还应用于启发用户。在本文中，我们将讨论如何创建一种效果，使文本的底部一半隐藏，并在光标悬停在其上时显示出来。
使用的属性
以下是我们在示例中使用的属性 -
clip-path 属性 - clip-path CSS 属性用于创建剪辑路径，剪辑路径是一个非矩形区域，定义元素的可见区域。该属性用于隐藏落在剪辑路径外部的元素部分，从而实现以前只能通过图像蒙版或 SVG 实现的复杂形状和效果。
CSS transition 属性 - transition CSS 属性用于在不同的 CSS 样式或属性值之间创建平滑的动画过渡。当 transition 应用于元素时，它指定过渡的持续时间、时间函数、延迟以及正在过渡的属性或属性。此属性可以应用于各种 CSS 属性，包括背景颜色、不透明度、变换等等。
HTML 示例
我们从一个简单的 HTML 结构开始，该结构包含一个容器元素和一个 hidden-text div。容器元素只是 hidden-text div 和文本“将鼠标悬停在此文本上以显示它”的包装器。
容器元素的 position 为 relative，这是绝对定位的 hidden-text div 相对它进行定位所必需的。hidden-text div 的 position 为 absolute，这允许我们将它定位在容器元素的顶部。
hidden-text div 的 top、left、right 和 bottom 均为 0，这将其定位在容器元素的左上角，并将其拉伸以覆盖整个容器元素。bottom 设置为 50%，这隐藏了 hidden-text div 的底部一半。
hidden-text div 的 background-color 设置为 white，color 设置为 orange。font-size 设置为 30px，这使文本更大，更易于阅读。text-align 设置为 center，这将文本水平居中。line-height 设置为 200%，这增加了文本行之间的垂直间距。
clip-path 属性设置为一个隐藏 hidden-text div 底部一半的多边形。它包含四个定义矩形的点：0 0（左上）、100% 0（右上）、100% 100%（右下）和 0% 100%（左下）。
transition 属性用于在 JavaScript 中更改 clip-path 时创建平滑的过渡。
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
</head>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
JavaScript 示例
以下是 JavaScript 代码 -
此代码在 .container 元素的 mousemove 事件上设置了一个事件监听器。当用户在容器内移动鼠标时，将执行事件监听器回调函数。
在回调函数内部，代码选择 .hidden-text 元素，该元素是我们想要在鼠标悬停时显示的元素。然后，使用 polygon() 函数创建一个名为 clipPath 的变量以定义剪辑路径的形状。
使用四个坐标定义多边形，这些坐标表示剪辑路径的四个角。前两个坐标始终为 0 0，表示元素的左上角。第三个坐标 100% ${100 - e.clientY / window.innerHeight * 100}%，表示剪辑路径的右下角。
第四个坐标为 0% ${100 - e.clientY / window.innerHeight * 100}%，表示剪辑路径的左下角。0% 指示元素的左边缘，100 - e.clientY / window.innerHeight * 100 计算鼠标相对于元素高度的垂直位置。
100% 指示元素的右边缘，100 - e.clientY / window.innerHeight * 100 计算鼠标相对于元素高度的垂直位置，并将其从 100 中减去，以确保剪辑路径从元素底部向上增长。
最后，.hidden-text 元素的 style.clipPath 属性设置为 clipPath 变量，这将剪辑路径应用于元素，并在鼠标向上移动时显示文本的底部一半。
JavaScript 代码向容器元素添加了一个事件监听器，以侦听鼠标移动事件。当鼠标移到容器上时，hidden-text div 的 clip-path 会根据鼠标位置动态更改。
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
示例
以下是完整的示例 -
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
</head>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
结论
使用 clip-path 属性时，务必确保要剪辑的元素具有定义的宽度和高度，否则剪辑路径可能无法按预期工作。此外，该属性可能在旧版浏览器中不受完全支持，因此务必进行彻底测试并在必要时提供备用样式。
363 次浏览
