I have a border around my web page which is preventing from hovers over element from working. In the example below the green box is to scale when hovered over but doesn't.
If I add a negative z-index to body::before tag it works. But then all text goes over the border when the page is scrolled.
I need the border to always be on top and the hovers to still work.
.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>Set pointer-events: none on the border's pseudo-element:
.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>