событие парения css, не работающее после использования JavaScript?

Question

событие парения css, не работающее после использования JavaScript?

Вот код, в котором у меня есть проблема -

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
<div id="col1">Hover to view and click to select this color.</div>
<div id="col2">Hover to view and click to select this color.</div>

This is some text.

<script type="text/javascript">

var pElements = document.getElementsByTagName("p");

$('#col1').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#f00";
}
});

$('#col2').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#ff0";
}
});

</script>
</body>
</html>

То, что я на самом деле хочу, то, что, когда я толплюсь цветное отделение, цвет текста в p изменениях тега в течение только того времени, когда цветное отделение колеблется. Когда по цветному отделению щелкают, цвет текста должен постоянно измениться.

Проблема с состоит в том, что, как только я нажимаю на 1 цветных отделений, чтобы завершить его для признака p, и затем после этого, другой цвет колеблется, цветное изменение не происходит. Цвет постоянно изменяется по щелчку, как это должно произойти.

2

добавлено 28 Декабрь 2012 в 03:17 автор sdnr1

Просмотры: 3

источник

nl ja de

Don' t используют встроенные стили. Добавьте/удалите класс и основывайте желаемый CSS, разрабатывающий на тех.

добавлено 28 Декабрь 2012 в 03:20, автор DCoder, источник

Ваш JavaScript устанавливает стили элемента явно и разрабатывает набор, у того пути есть приоритет не - ! важный стили CSS.

добавлено 28 Декабрь 2012 в 03:29, автор DCoder, источник

Я не использую действующего моделирования. Проблема, что, как только JavaScript выполняется wheen отделение, щелкнула, тогда событие парения не работает. Попытайтесь делать это практически.

добавлено 28 Декабрь 2012 в 03:27, автор sdnr1, источник

я не знал, что javacript устанавливает действующий CSS для элементов. Спасибо за это.

добавлено 29 Декабрь 2012 в 06:45, автор sdnr1, источник

2 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Когда вы устанавливаете p , элементы разрабатывают с pElements [я] .style.color = "#f00"; вы устанавливаете более определенный стиль тогда тот, примененный вашим парением. В CSS добирается самый определенный стиль, относился к элементу. Класс парения CSS, который вы определили, никогда не будет применяться, потому что это не достаточно конкретно, чтобы переписать встроенные стили, примененные вашим кодом JavaScript.

Вы могли изменить свой класс парения CSS, чтобы использовать ! важный признак, это должно позволить вам применять стиль парения даже при том, что это не столь конкретно как встроенный стиль.

#col2:hover ~ p {
    color: #ff0 !important;
}

5

добавлено 28 Декабрь 2012 в 03:32 автор jeremysawesome

источник

добавление! важный для свойства стиля, решенного мое точное та же самая проблема!

добавлено 24 Июль 2013 в 09:00, автор Enrico, источник

Спасибо для получения дальнейшей информации.

добавлено 29 Декабрь 2012 в 06:44, автор sdnr1, источник

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

автор Luis · Answer 1 · 2012-12-28T03:39Z

If its not a problem using JQuery, I think is what you want: Live Example

отрывок кода HTML

<div id="col1">Hover to view and click to select this color.</div>
<div id="col2">Hover to view and click to select this color.</div>

This is some text.

отрывок кода CSS

p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}

фрагмент кода JS

$("#col1").click(function() {
    $("p").css("color","#f00");
});

$("#col2").click(function() {
    $("p").css("color","#ff0");
});

Надежда это помогает!