时间戳

首页 > 解决方案 > 我页面周围的边框正在阻止元素悬停工作

css - 我页面周围的边框正在阻止元素悬停工作

问题描述

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

如果我添加一个否定标签它可以工作z-index。body::before但是，当页面滚动时，所有文本都会超出边框。

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

.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>

标签： csshoverborderz-index

解决方案

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>

推荐阅读