Remove all hover effects through css

Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:

.thing:hover {}

to include the Modernizr class:

html.no-touch .thing:hover {}

Although you should be aware that any solution that uses Modernizr will not be a 'pure CSS solution', as Modernizr is javascript.

Try the all:unset or all:initial

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

Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)

Update

This is now supported very decent across all mobile browsers, here is the Can I use link:

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

Old answer

This is good but not supported very well:

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

But this has a very good support:

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

Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.