如果鼠标位于div的下半部分，CSS会在悬停时动态更改可点击区域以调整大小

Question

我将div设置为绝对值，通过更改为position：static来扩展，以显示内部的全文。

我想知道如果用户超出原始范围而不是新的放大框，是否可以缩小此范围。

.box {
  position:relative;
  overflow:hidden;
}

.box:hover {
  position:static;
}

这有点令人讨厌，因为它填满了屏幕的一大块，用户必须将鼠标移到div外面才能收缩，我希望他们将鼠标移到div的原始大小之外而不是溢出的div来缩小它。

在显示展开的div时，是否有任何技巧可以将可点击区域维持在原始边界？

Answer 1

我添加了此样式（background-color: rgba(0,0,0,0.2);）只是为了显示原始容器，对于实际代码，我应将其更改为background-color: transparent;。

＆＃13;

＆＃13;

body {
  margin: 0;
}

.box2 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  transition: all 2s;
  background-color: red;
  top: 0;
}

.box {
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  transition: all 2s;
  background-color: rgba(0,0,0,0.2);
  z-index: 2;
}

.box:hover+.box2 {
  position: static;
  width: 200px;
  height: 200px;
}

＆＃13;

<div class="">
  <div class="box">
  </div>
  <div class="box2">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;