Xóa tất cả các hiệu ứng di chuột qua css

Question

Khi tôi tắt thiết bị cảm ứng, tôi không muốn có hành vi di chuột. Có thể tắt tất cả các hiệu ứng di chuột cùng một lúc cho toàn bộ trang web không?

Cho rằng bạn sử dụng Modernizr để phát hiện chạm và đặt lớp.

Đây là những gì tôi đã đưa ra nhưng nó mang lại rất nhiều mâu thuẫn:

html.touch *:hover { 
    color: inherit !important; 
    background: inherit !important; 
} 

Có cách nào để làm điều này với CSS tinh khiết? Nếu không, làm thế nào nó có thể được thực hiện với javascript?

Answer 1

này là tốt nhưng không supported rất tốt:

html.touch *:hover { 
    all:unset!important; 
} 

Nhưng điều này có một rất tốt support:

html.touch *:hover { 
    pointer-events: none !important; 
} 

Làm việc hoàn hảo đối với tôi, nó làm cho tất cả các hiệu ứng chuyển động giống như khi bạn có một liên lạc trên một nút, nó sẽ sáng lên nhưng không kết thúc buggy như hiệu ứng di chuột ban đầu cho các sự kiện chuột.

Answer 2

Thử Hỗ ​​trợ all:unset hoặc all:initial

html.touch *:hover { 
    all:unset!important; 
} 

được giới hạn (https://developer.mozilla.org/en-US/docs/Web/CSS/all)

Answer 3

Cố gắng một nhận tất cả giải pháp có lẽ sẽ được khôn lanh. Tôi sẽ chỉ chuyển đổi bất cứ nơi nào trong css của bạn, nơi bạn định nghĩa một di chuột:

.thing:hover {} 

để bao gồm các lớp Modernizr:

html.no-touch .thing:hover {} 

Mặc dù bạn nên biết rằng bất kỳ giải pháp sử dụng Modernizr sẽ không được một ' giải pháp CSS tinh khiết ', như Modernizr là javascript.