CSS таблицы стилей сильнее, чем jquery addClass? - PullRequest
Новая
       5

CSS таблицы стилей сильнее, чем jquery addClass?

2 голосов
/ 18 сентября 2009

Эй, ребята, эта штука сводит меня с ума. Я определил в моей таблице стилей: 

ul#menuCnt li a {
   color:"red";
}

Если я хочу сделать эффект наведения, используя jquery, это не изменит цвет. 

$("ul#menuCnt li a").hover(function() {
        $(this).addClass("brown");
    }, function() {
        $(this).removeClass("brown");
    });

Я действительно смущен. Если я не определяю цвет в моей таблице стилей CSS, эффект hovereffect работает.

Надеюсь, ты сможешь мне помочь. Вы, ребята, очень помогли мне, изучая jquery и css:)

Спасибо!

Ответы [ 6 ]

10 голосов
/ 18 сентября 2009

В соответствии с приоритетами CSS, если ваш класс .brown определен в вашем файле CSS следующим образом: 

.brown{}

Внутренние правила не будут переопределять те же правила в вашем селекторе #.

Вы можете переопределить их, используя ключевое слово !important. 

.brown {
    color: brown !important;
}

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

См. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

2 голосов
/ 18 сентября 2009

У вас есть очень специфический спецификатор элемента здесь. Это считается более важным, чем простой селектор класса .brown, и, следовательно, не имеет большого эффекта.

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

2 голосов
/ 18 сентября 2009

Я не вижу, чтобы вы упоминали проблему с использованием css для этого, так почему бы не попробовать: 

ul#menuCnt li a:hover {
   color:"brown";
}

Редактировать: На самом деле он должен работать в ie6, так как якорь :) Это было бы намного быстрее, чем при использовании javascript.

2 голосов
/ 18 сентября 2009

Есть ли у вас .brown селектор в вашем CSS? Также тег a может быть плохим выбором, потому что он имеет очень хорошую встроенную селекторную функцию :hover.

1 голос
/ 18 сентября 2009

Почему вы не используете псевдокласс CSS :hover? Например: 

#menuCnt li a {
    color: "red";
}

#menuCnt li a:hover {
    color: "brown";
}

Кроме того, использование «UL» в селекторе не должно быть необходимым. На странице нет других элементов с идентификатором «menuCnt», поскольку атрибут идентификатора должен быть уникальным в DOM.

0 голосов
/ 19 сентября 2009

Я провел некоторое тестирование с IE / FF и обнаружил, что включение идентификатора элемента в вашу таблицу стилей (ul # menuCnt) не позволяет JQuery переопределять этот стиль - по крайней мере, с помощью методов, которые я использовал (toggleClass, addClass, removeClass и т. Д.) .

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

Если вы удалите идентификатор из стиля, вы можете переопределить его с помощью JQuery (не очень полезно, но хорошо для демонстрации поведения).

Фактически, если вы оставите идентификатор в своей таблице стилей и попытаетесь назначить другой класс внутри тега, вы все равно увидите класс, связанный с идентификатором, в таблице стилей.

Примечание: Пост Винсента подсказывает, почему мы видим такое поведение.

Я также согласен с предложением exhuma использовать: hover в вашем CSS.

...