css实现div禁用效果
2019-07-25 本文已影响0人
骨朵a
css实现div禁用效果及常见的一个问题
首先先看一下我们要实现的效果
禁用效果
用到的属性
.setCursor {
cursor: not-allowed;
}
但是通常我们还会添加pointer-events: none来禁用掉对应div
.setCursor {
cursor: not-allowed;
pointer-events: none;
}
但是这样，问题就出来了----------cursor: not-allowed这个属性失效了。
解决
在目标div上再套一层div，将cursor: not-allowed加到父盒子上，目标div保留pointer-events: none
demo
<style>
div {
width: 200px;
height: 200px;
border: 1px solid;
}
.disable {
pointer-events: none;
}
.setCursor {
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="setCursor">
<div class="disable" onclick="alert('click')"></div>
</div>
</body>
这是我个人总结到的一个小技巧，希望能帮到有需要的人。
转载请注明出处
