CSS div set not clickable
CSS div set to non-clickable
In web development, you often encounter situations where you need to make a <div> element non-clickable. This could be because the <div> element is purely display-only and doesn’t need to respond to user clicks, or because clicks need to be disabled under certain conditions. In this case, we can use CSS to make the <div> element unclickable.
Using the pointer-events Property
To make a <div> element unclickable, the most common CSS property is the pointer-events property. This property allows you to control whether an element responds to mouse events.
Grammar
.element {
pointer-events: none;
}
In the syntax above, we use pointer-events: none; to make the .element element unclickable. By setting it to none, this element will not trigger any mouse events.
Example
<!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>Unclickable div</title>
<style>
.unclickable {
width: 200px;
height: 100px;
background-color: lightblue;
pointer-events: none;
cursor: not-allowed;
}
.clickable {
width: 200px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="unclickable">I am an unclickable div</div>
<div class="clickable">I am a clickable div</div>
</body>
</html>
In the sample code above, we create two <div> elements: one unclickable .unclickable and one clickable .clickable. The pointer-events property of the .unclickable element is set to none, making it unclickable. Additionally, we use cursor: not-allowed; to change the style of the unclickable element when the mouse hovers over it.
Running Results
When you open the sample code above, you’ll see two <div> elements. Only the clickable one will produce a click effect when clicked.
Using the user-select Attribute
In addition to using the pointer-events attribute, we can also use the user-select attribute to control whether an element is selectable. While this attribute is primarily used to control text selection, it can also be useful in other situations.
Syntax
.element {
user-select: none;
}
Using user-select: none; prevents users from selecting the element’s content, thus achieving a degree of unclickability.
Using the z-index Attribute
If an element is obscured by other elements, users may not be able to directly click on it. In this case, we can use the z-index property to adjust the stacking order of the element to ensure that the element is not obscured, making it clickable.
Syntax
.element {
z-index: 9999; /* Can be any integer greater than or equal to 0 */
}
By setting a larger z-index value, you can position an element above other elements, ensuring it’s clickable.
Conclusion
Using the above method, we can easily make a <div> element unclickable. Depending on your needs and circumstances, you can choose the appropriate method to achieve this effect. In actual development, flexibly using CSS properties can help us better control the behavior of page elements and improve the user experience.