网站首页 > 知识剖析 正文
简介
在实际业务开发过程中,我们经常会遇到一些,不太好解决的问题,例如:图片自带间距、父级元素高度问题、元素覆盖问题等待,其实很多的问题,咱们完全可以使用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>
猜你喜欢
- 2024-12-01 HTML中script标签中的那些属性
- 2024-12-01 前端入门——css 网格项属性
- 2024-12-01 CSS解析——简写属性
- 2024-12-01 CSS必知|重点属性float|实践技巧|温故知新
- 2024-12-01 一个简单的CSS属性助你实现页面的等比例缩放,快来学习一下吧
- 2024-12-01 CSS必知|重点属性media|实践技巧|温故知新
- 2024-12-01 CSS小知识,分享14个你可能还未用上但又实用的CSS属性(下)
- 2024-12-01 CSS很难学吗?这几个属性掌握了,秒变CSS大神!
- 2024-12-01 CSS基本属性(三)
- 2024-12-01 每个前端开发需要了解的10个强大的CSS属性
- 最近发表
-
- jQuery EasyUI使用教程:创建展开行详细编辑表单的CRUD应用
- CSDN免登陆复制代码的几种方法(csdn扫码登录怎么实现的)
- LayUi提高-Select控件使用(layui form select)
- 用 Playwright MCP 让 AI 改它自己写的屎山代码
- multiple-select.js中手动设置全选和取消全选
- 前端实现右键自定义菜单(html 自定义右键菜单)
- JavaScript脚本如何断言select下拉框的元素内容?
- 广州蓝景分享—实用的CSS技巧,助你成为更好的前端开发者
- MyBatis-Plus码之重器 lambda 表达式使用指南,开发效率瞬间提升80%
- Go语言之select的使用和实现原理(go select case)
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)