简介
在实际业务开发过程中，我们经常会遇到一些，不太好解决的问题，例如：图片自带间距、父级元素高度问题、元素覆盖问题等待，其实很多的问题，咱们完全可以使用CSS来解决，今天我们一起来学习一下CSS新增的“透视属性”。
属性介绍
pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）
pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用。
其中auto属于默认值，none使得元素不作为鼠标的target事件，也就是说当点击元素时，直接透过它，接下来我们看一个小的案例。
案例介绍
默认展示一个搜索栏
当搜索栏点击时，下方出现对应组件，由于是基础案例下面由蓝色的DIV代替
下面是对应代码，业务分析可以看对应视频解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>穿透属性</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2772367_01hf7sd1ocaa.css">
<style>
*{
margin: 0;
padding: 0;
}
input{
width: 300px;
height: 20px;
}
.history{
width: 300px;
height: 100px;
background-color: blue;
/* display: none; */
}
.icon-fangdajing{
font-size: 18px;
position: absolute;
left: 282px;
top: 2px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="search">
<input type="text" id="search">
<i class="icon iconfont icon-fangdajing"></i>
<div class="history" id="history"></div>
</div>
<script>
let search=document.getElementById("search")
let history=document.getElementById("history")
search.onclick=function(){
history.style.display="block"
}
search.onblur=function(){
history.style.display="none"
}
</script>
</body>
</html>