Вопрос по onclick, javascript, hover, css – CSS и Javascript: функция изменения стиля наведения цветовых эффектов

4

У меня есть элемент, в котором я устанавливаю цвет текста и другой цвет текста для состояния наведения в CSS. У меня есть некоторый JavaScript, поэтому, когда я нажимаю на элемент, он меняет цвет текста элемента. Он отлично работает, за исключением того, что он также влияет на CSS при наведении, который я хочу оставить тем же, что и при предварительно щелчке мышью по CSS. Есть ли способ остановить hover css или установить hover CSS?

http://jsfiddle.net/77zg8/

CSS:

#test {color: blue;}
#test:hover {color:green;}

HTML:

qwerty

Javascript:

function change() {document.getElementById("test").style.color="#cc0000";};

Ваш Ответ

4   ответа
6

чтобы устанавливать цвет напрямую, было бы чище (и более эффективно использовать класс).

CSS:

#test {color: blue;}
#test.active {color:red;}
#test:hover {color:green;}

JavaScript:

function change() {
   document.getElementById("test").className='active';
}

демонстрация

Спасибо! Я мог бы добавить, что если у элемента уже есть класс со стилями, мне нужно было бы дать новому классу те же стили. user2219915
2

Используйте классы!

#test {color: blue;}
#test:hover, #test.foo:hover {color:green;}
#test.foo { color : #cc0000 }

Базовый JavaScript:

function change() {document.getElementById("test").className = "foo"; };

Конечно, вам придется переключать классы.

-1

Ты можешь использовать!important JSFIDDLE

#test:hover {color:green!important;}
важно плохая идея epascarello
0

с которой вы сталкиваетесь - это концепция специфичности в css. Специфика определяет, какие правила применяются и в каком порядке. Поскольку javascript обновляет элемент стиля, он переопределяет специфику и удаляет все предыдущие правила, касающиеся цветовой стилизации. так что вместо этого добавьте класс, например "щелкнул» к элементу. где щелкнул ваш новый цвет

.clicked{color:red}

function change() {document.getElementById("test").class += " clicked"};

Это будет делать то, что вам нужно.

Похожие вопросы