|
|
@@ -1,54 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>鼠标穿透示例</title>
|
|
|
- <style>
|
|
|
- body {
|
|
|
- margin: 0;
|
|
|
- height: 100vh;
|
|
|
- background-color: #f0f0f0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
- width: 300px;
|
|
|
- height: 300px;
|
|
|
- background-color: rgba(0, 150, 255, 0.5); /* 半透明 */
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- font-size: 24px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .transparent-area {
|
|
|
- position: absolute;
|
|
|
- top: 20px; /* 设置透明区域的顶部位置 */
|
|
|
- left: 20px; /* 设置透明区域的左边位置 */
|
|
|
- width: 100px; /* 设置透明区域宽度 */
|
|
|
- height: 100px; /* 设置透明区域高度 */
|
|
|
- background-color: transparent; /* 透明度 */
|
|
|
- pointer-events: none; /* 允许鼠标事件穿透 */
|
|
|
- }
|
|
|
- .underlying {
|
|
|
- position: absolute;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- background-color: orange;
|
|
|
- top: 100px;
|
|
|
- left: 100px;
|
|
|
- z-index: -1; /* 确保位于底层 */
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="container">
|
|
|
- <div>鼠标穿透示例</div>
|
|
|
- <div class="transparent-area"></div> <!-- 允许鼠标穿透的区域 -->
|
|
|
- <div class="underlying"></div> <!-- 背后的元素 -->
|
|
|
- </div>
|
|
|
-</body>
|
|
|
-</html>
|
wll8