Question

考虑这个人为的例子。我有两个div，当您将鼠标悬停在上面时，其中一个的大小会增加两倍。当您将鼠标移出扩展框的边缘时，它将恢复为正常大小。

值得注意的是，只有当鼠标离开扩展框的边界时，它才会恢复到正常大小。我想要的是当鼠标离开框原始大小的边界时，框恢复到其正常大小。

我一直在阅读其他问题，我认为伪元素可能是前进的方向，但我无法弄清楚。有一些在元素缩小时保持边界框大小的示例，但在元素展开时不保持边界框大小。

.left {
width:300px; float:left;
}

.right {
width:300px; float:right; background-color: red;
}

.right:hover {
    transform: scale(2);
}

<br>
</br>
<div style="width:800px">
    <div class="left">foo</div>
    <div class="right">bar</div>
</div>

Answer 1

将pointer-events: none;添加到您要转换的div中。将:hover效果应用于包裹转换后的div的父级div。示例：

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 100px;
  width: 100px;
  background: tomato;
  pointer-events: none;
}

.parentBox:hover .box {
  transform: scale(2);
}

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

您还可以通过将事件处理程序放在框的父级上来使框对事件做出反应，例如单击：

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 100px;
  width: 100px;
  background: tomato;
  pointer-events: none;
}

.parentBox:hover .box {
  transform: scale(2);
}

<div class="parentBox" onclick="alert('You clicked the box!');">
  <div class="box"></div>
</div>

缩小悬停区域的边界

1 个答案: