我页面周围的边框使元素悬停停止工作

Question

我的网页周围有一个边框，这阻止了将鼠标悬停在元素上的效果。在下面的示例中，绿色框在悬停时会缩放，但不会缩放。

如果我在 body::before 标签中添加一个否定的 z-index，它就会起作用。但是当页面滚动时，所有文本都会超出边界。

我需要边框始终在顶部并且悬停仍然有效。

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5);
  /* Safari 3-8 */
  transform: scale(1.5);
}

.lorem {
  width: 300px;
  margin: auto;
}

body::before {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 15px solid #30582b;
  padding: 0px;
}

<div class="zoom"></div>
<div class="lorem">

  What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
  book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to
  make a type specimen book it has?What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type
  and scrambled it to make a type specimen book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer
  took a galley of type and scrambled it to make a type specimen book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when
  an unknown printer took a galley of type and scrambled it to make a type specimen book it has?What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever
  since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?


</div>

Answer 1

在边框的伪元素上设置pointer-events: none:

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5);
  /* Safari 3-8 */
  transform: scale(1.5);
}

.lorem {
  width: 300px;
  margin: auto;
}

body::before {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 15px solid #30582b;
  padding: 0px;
  pointer-events: none;
}

<div class="zoom"></div>
<div class="lorem">

  What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
  book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to
  make a type specimen book it has?What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type
  and scrambled it to make a type specimen book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer
  took a galley of type and scrambled it to make a type specimen book it has? What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when
  an unknown printer took a galley of type and scrambled it to make a type specimen book it has?What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever
  since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?


</div>

我页面周围的边框使元素悬停停止工作

Border around my page is stopping element hover from working

css

border

z-index

hover