时间:2022-05-07来源:www.pcxitongcheng.com作者:电脑系统城
可以通过设置元素的pointer-events属性设置为none,来实现元素不可点击。
此方法是通过设置元素的鼠标事件失效来实现元素不可点击。
1 | pointer-events: none ; |
CSS pointer-events 属性定义元素是否对指针事件做出反应。
属性值 | 描述 |
---|---|
auto | 默认值。元素对指针事件做出反应,比如 :hover 和 click。 |
none | 元素不对指针事件做出反应。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> < html > < head > < style > div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; } </ style > </ head > < body > < h1 >pointer-events 属性</ h1 > < p >请把鼠标指针移至下面的链接,查看是否对指针事件做出反应:</ p > < h2 >pointer-events: none:</ h2 > < div class = "ex1" >访问 < a href = "https://www.w3school.com.cn/html/" >HTML 教程</ a ></ div > < h2 >pointer-events: auto(默认)</ h2 > < div class = "ex2" >访问 < a href = "https://www.w3school.com.cn/css/" >CSS 教程</ a ></ div > </ body > </ html > |
到此这篇关于css如何设置不可点击的实现方法的文章就介绍到这了,更多相关css设置不可点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
2024-07-07
Nginx+Tomcat部署Angular+javaweb项目的操作2024-07-04
wordpress如何统计浏览量2024-07-04
wordpress如何自动分页wordpress 首页模板修改步骤:登录 wordpress 仪表盘。转至“外观”>“主题编辑器”。找到并备份“index.php”文件。更新首页模板元素,包括标题、内容、侧边栏和页脚。保存更改并预览。...
2024-07-04
通过修改 cascading style sheets (css) 文件,可以有效修改 wordpress 主题框架的排版。步骤包括:识别需要更改的元素及其相应的 css 类或 id。打开 theme 的 css 文件并编辑...
2024-07-04