鼠標不可點擊時的樣式
cursor:not-allowed;
效果如下圖:
需要注意的是,雖然樣式顯示不可點擊,但是點擊仍會觸發相應事件。
禁止觸發事件
pointer-events:none;
使用該樣式,會阻止事件的觸發。鼠標會顯示為箭頭樣式;
如果同時使用這兩種樣式,會阻止事件的觸發,但鼠標並不會如我們所想顯示為禁用樣式,而是顯示為箭頭樣式。
所以我們在實現效果的時候,可以使用cursor:not-allowed; 然后使用 js代碼去阻止事件的觸發;
cursor:not-allowed;
pointer-events:none;