изменить цвет в CSS без добавления нового класса?

Question

У меня есть вызов с именем .item, который очень сложен. Я хочу изменить цвет наведения только без копирования всех имен классов на другое имя, просто чтобы изменить цвет наведения.Как проще всего поменять цвет с 000000 на FC0000?

.item-test a.hover .thumb {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #000000;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 5px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #000000;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 5px;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 1

Это, наверное, наименее эффективный CSS, который я когда-либо видел ...

.item-test a.hover .thumb{
    border: 5px solid #000;
    overflow:hidden;
}

Сделал бы то же самое.

Чтобы внести изменения в hover, вы просто должны сделать:

.item-test a.hover .thumb:hover{
    border-color:#FC0000;
}

Однако некоторые браузеры не поддерживают класс: hover psuedo, если он не является ахорским. К счастью, кажется, что у вас есть .thumb, вложенный в ахор, поэтому вам следует вместо этого сделать это для обеспечения полной совместимости:

.item-test a:hover .thumb:hover{
    border-color:#FC0000;
}

Answer 2

Просто добавьте новое определение CSS:

.item-test a.hover .thumb:hover {
    border-color: #FC0000;
}

Используемый здесь селектор .item-test a.hover .thumb:hover более специфичен, чем тот, который использовался выше (потому что он имеет дополнительный псевдокласс )следовательно, он будет иметь приоритет над ним.См. CSS 2 - Каскад .