鼠标停留的位置是弹出方框的位置如何css如何写

你可以使用 CSS 的 `::before` 或 `::after` 伪元素来实现鼠标停留弹出方框的效果。

具体操作如下：

1. 首先，为需要添加弹出方框的元素设置一个 `position: relative;` 的定位属性。

2. 接着，在该元素的伪元素 `::before` 或 `::after` 中添加弹出方框的样式，例如设置 `content` 属性、背景颜色、边框、圆角等样式。

3. 最后，使用绝对定位 `position: absolute;` 和 `top`、`left` 等属性来控制弹出方框的位置，其中 `top` 和 `left` 的值可以使用 `calc()` 函数和 `attr()` 函数来动态计算。

以下是一个示例代码：

.box {
  position: relative;
}
.box::before {
  content: "弹出方框";
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: attr(data-left);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
.box:hover::before {
  display: block;
}

在上述代码中，我们将弹出方框的内容设置为伪元素 `::before` 的 `content` 属性，使用 `display: none;` 将其隐藏起来，鼠标悬浮时再将其显示出来。弹出方框的位置则使用 `top` 和 `left` 属性进行控制，其中 `left` 属性使用了 `attr()` 函数来获取自定义的 `data-left` 属性值，这样就可以动态计算弹出方框的位置了。