pointer-events thường được sử dụng nhất để bỏ qua sự kiện click trên element.
Thay đổi style của element parent khi hover
Khi button được hover lên, chúng ta thay đổi style của thằng cha
<div class='parent'>
<button class='btn'>
Hover me
</button>
</div>.parent {
pointer-events: none;
transition: border-color 0.15s ease-in-out;
&:hover {
border-color: #0069d9;
}
}
.btn {
pointer-events: auto;
}Nếu đoạn code trên ko set pointer-events: none thì khi ta hover lên <div class='parent'/> nó sẽ thay đổi ngay, ở đây ta đang chặn lại để sự thay đổi chỉ xảy ra khi hover lên button
Thay đổi style của element khác
Khi hover lên .btn, .element sẽ thay đổi màu text
<div class='parent'>
<div>
<button class='btn' />
</div>
<div>
<div class='element' />
</div>
</div>.parent {
pointer-events: none;
&:hover {
.element {
color: #28a745;
}
}
}
.btn {
pointer-events: auto;
}
Initializing...