Вариантов не много, на скорую руку накатал только такой:
<html>
<head>
<style>
body > a {
color: red;
}
body > a:hover {
color: blue !important;
}
@media (max-width: 991.98px) {
body > a:hover {
color: green;
}
}
body > a:hover {
color: yellow;
}
</style>
</head>
<body>
<a href="javascript:void(0)">Link</a>
<script>
window.getPseudoStyles = function(element, pseudo) {
if(!document.styleSheets) return;
for(var i = document.styleSheets.length - 1; i > -1; i--) {
var
rules = document.styleSheets[i].cssRules ? document.styleSheets[i].cssRules : document.styleSheets[i].rules;
for(var j = rules.length - 1; j > -1; j--) {
if(rules[j].selectorText) {
var
match = rules[j].selectorText.match(new RegExp('^(.+)(' + pseudo + ')$'));
if(match && match.length === 3 && document.querySelector(match[1]).isEqualNode(element))
return rules[j].style;
}
}
}
return;
}
var
a = document.querySelector('body > a');
alert(getPseudoStyles(a, ':hover').color);
</script>
</body>
</html>
Но не работает с медиа, для этого надо дописывать, но получится ещё больший велосипед чем это.
Вообще не представляю задачу при которой потребуется данное решение, обычно подход идёт совсем с другой стороны.
Так же, в данном случаи берётся последний из вариантов применённых стилей с псевдо классом, как делает это браузер, по сути предыдущие не нужны, но есть но, !important и тут он получается игнорируется, по этому дополнительных изменений функции не избежать.