专业的编程技术博客社区

网站首页 > 博客文章 正文

一起来学习CSS新增属性，“透视”属性

baijin 2024-11-25 09:37:56 博客文章 3 ℃ 0 评论

简介

在实际业务开发过程中，我们经常会遇到一些，不太好解决的问题，例如：图片自带间距、父级元素高度问题、元素覆盖问题等待，其实很多的问题，咱们完全可以使用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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表