css 实现一个长方容器X轴和Y轴，分别有一个圆点。元素内拖动一个原点。X轴和Y轴的点跟随动

态移动，圆点的位置表示为X轴和Y轴的交点。实现方法如下：

HTML代码：

<div class="container">
  <div class="x-axis"></div>
  <div class="y-axis"></div>
  <div class="dot"></div>
</div>

CSS代码：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.x-axis, .y-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.x-axis {
  border-top: 2px solid #f00;
  border-bottom: 2px solid #f00;
}

.y-axis {
  border-left: 2px solid #00f;
  border-right: 2px solid #00f;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dot:active {
  cursor: move;
}

.dot:active ~ .x-axis::after,
.dot:active ~ .y-axis::after {
  content: "";
  position: absolute;
  background-color: #000;
}

.dot:active ~ .x-axis::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
}

.dot:active ~ .y-axis::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
}

.dot:active:hover {
  cursor: move;
}

.dot:active:hover ~ .x-axis::after,
.dot:active:hover ~ .y-axis::after {
  background-color: #f00;
}

.dot:active:hover ~ .x-axis::after {
  height: 4px;
}

.dot:active:hover ~ .y-axis::after {
  width: 4px;
}

解释说明：

1. 使用 `position: relative` 的容器作为基准容器，设置宽度和高度为 300px，边框为 1px 实线边框，颜色为 #ccc。

2. 使用两个 `position: absolute` 的元素 `.x-axis` 和 `.y-axis` 分别作为 X 轴和 Y 轴。

3. 为 X 轴和 Y 轴分别设置颜色为红色和蓝色的实线边框，粗细为 2px。

4. 使用一个 `position: absolute` 的元素 `.dot` 作为可拖动的圆点，设置宽度和高度为 10px，背景色为黑色，圆角为 50%，并使用 `transform: translate(-50%, -50%)` 进行居中定位。

5. 使用 `:active` 伪类为 `.dot` 元素添加拖动效果，并通过 `transform: translate()` 实现拖动效果。

6. 使用 `:active` 伪类为 `.dot` 元素的后代元素 `.x-axis::after` 和 `.y-axis::after` 添加 X 轴和 Y 轴的动态效果。

7. 使用 `:hover` 伪类为 `.dot` 元素添加鼠标悬停效果，并使用 `.dot:active:hover ~ .x-axis::after` 和 `.dot:active:hover ~ .y-axis::after` 为 X 轴和 Y 轴添加悬停效果。