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

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;
}

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