我页面周围的边框正在阻止元素悬停工作[重复]

Posted 2023-05-08

【中文标题】我页面周围的边框正在阻止元素悬停工作[重复]

【英文标题】：Border around my page is stopping element hover from working [duplicate]

【发布时间】：2020-09-18 07:19:31

【问题描述】：

我的网页周围有一个边框，可以防止将鼠标悬停在元素上。 在下面的示例中，绿色框在悬停时进行缩放，但不会。

如果我在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>

【参考方案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>