Удалить hover CSS

Question

Есть ли способ создать класс, который удаляет hover css из элемента?

Скажем, у меня есть два элемента:

<div class="orange noHover">Whatever</div> 
<div class="blue noHover">Whatever2</div> 

.orange { 
    color:orange; 
} 
.orange:hover { 
    color:red; 
} 
.blue { 
    color:blue; 
} 
.blue:hover { 
    color:green; 
} 
.noHover:hover { 
    //Remove all hover css applied 
} 

я хочу класс noHover вести себя так, как будто ему оранжевый и синий парить CSS никогда не применялся к любому элементу. Таким образом, оранжевый всегда будет оранжевым, а синий всегда будет синим.

Answer 1

Из того, что я могу сказать, вы хотите, чтобы элементы ничего не делали при наведении. То есть поддерживать любые стили, которые они обычно имели бы, когда они не зависали. Например, если у них есть оранжевый фон, когда они не парят, вы хотите, чтобы они остались оранжевыми.

К сожалению, нет никакого способа сделать это с помощью чистого css.

Answer 2

ОК, может быть, это не совсем то, что вы имели в виду, но это будет работать:

.orange, 
.orange.noHover:hover { 
    color:orange; 
} 

.orange:hover { 
    color:red; 
} 

.blue, 
.blue.noHover:hover { 
    color:blue; 
} 

.blue:hover { 
    color:green; 
} 

Другой метод, но не совместим с IE8 и ниже:

.orange { 
    color:orange; 
} 
.orange:not(.noHover):hover { 
    color:red; 
} 
.blue { 
    color:blue; 
} 
.blue:not(.noHover):hover { 
    color:green; 
}