在鼠标附近显示一个中心渐变色的高亮效果，可以使用 CSS 的径向渐变（radial-gradient）来创建这个效果。这个方法会让高亮效果从中心向外渐变，逐渐变得透明，从而实现鼠标周围的区域高亮。
使用径向渐变实现鼠标附近的高亮效果
我们将修改之前的示例，使用 radial-gradient 来实现中心渐变色的高亮效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mouse Highlight Effect with Gradient</title><style>css">.container {width: 300px;height: 200px;background-color: #f0f0f0;border: 1px solid #ccc;position: relative;overflow: hidden;}.highlight {position: absolute;width: 150px;height: 150px;background: radial-gradient(circle, rgba(255, 255, 0, 0.5) 0%, rgba(255, 255, 0, 0) 60%);pointer-events: none; /* 使高亮区域不阻碍鼠标事件 */transform: translate(-50%, -50%); /* 将中心对准鼠标 */}</style>
</head>
<body><div class="container" id="container">这里是一个可以高亮的区域</div><script>const container = document.getElementById('container');// 创建高亮效果的元素const highlightDiv = document.createElement('div');highlightDiv.classList.add('highlight');container.appendChild(highlightDiv);// 当鼠标在容器内移动时，更新高亮区域的位置container.addEventListener('mousemove', (e) => {const rect = container.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;highlightDiv.style.left = `${mouseX}px`;highlightDiv.style.top = `${mouseY}px`;});// 当鼠标离开容器时，隐藏高亮区域container.addEventListener('mouseleave', () => {highlightDiv.style.display = 'none';});// 当鼠标进入容器时，显示高亮区域container.addEventListener('mouseenter', () => {highlightDiv.style.display = 'block';});</script>
</body>
</html>
代码解释
-
container: 这是高亮效果的容器。当鼠标在容器内移动时，会显示高亮效果。 -
.highlight:- 使用
position: absolute使其能够相对于父容器定位。 width和height控制高亮区域的大小。background: radial-gradient(circle, rgba(255, 255, 0, 0.5) 0%, rgba(255, 255, 0, 0) 60%)这是一个径向渐变，中心为半透明黄色，向外渐变到完全透明。你可以调整渐变的颜色和透明度，以实现不同的效果。pointer-events: none确保高亮区域不会阻止鼠标事件传递到它下面的元素。transform: translate(-50%, -50%)确保渐变的中心位于鼠标所在的位置。
- 使用
-
JavaScript 逻辑:
- 创建一个
highlightDiv，用来显示渐变高亮效果。 - 使用
mousemove事件监听鼠标的移动，并根据鼠标的位置动态更新高亮区域的位置。 - 使用
mouseenter和mouseleave事件来控制高亮区域的显示和隐藏。
- 创建一个
这样，当鼠标在 container 内移动时，会显示一个跟随鼠标位置的渐变高亮区域，实现了鼠标附近高亮的效果。
