Поэтому он меняет фоновое изображение, но не цвет фона. В любом случае, обратите внимание на проблему в моем коде?Фоновый цвет не меняется?
JavaScript:
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
CSS:
.hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
Как уже упоминалось выше ... если вы просто добавите следующий css, он позаботится об этом.
a:hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
: парить является псевдо-класс CSS, и вы можете использовать его на что угодно, без необходимости добавить Jquery/JS, чтобы поддержать его.
Выстрел в темноте:
вам нужно, чтобы убедиться, что узлы существуют в DOM перед привязкой событий к ним. Если вы звоните вашей <script> в <head> ожидании document.ready:
jQuery(function($){
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
В качестве альтернативы, вы можете быть перекрывая background-color свойство, используя селектор с higher specificity в другом месте. Если вы определили стили, такие как a:link, a:visited, a:hover, a:focus или a:active вам потребуется более высокий селектор специфичностью, чтобы заменить его:
a.hover {
/* your styles here */
}
Вы должны будете предоставить больше вашего CSS для нас, чтобы дать вам лучше совет.
Вы, возможно, опечатка идентификатор или не вложены ваши a элементов под другой элемент с [id="menu"].
Согласно комментарию ShankarSangoli, у вас, вероятно, есть другое правило в вашем CSS, которое переопределяет цвет фона, что, в свою очередь, может быть проблемой с specificity.
Вы можете проверить это, слегка изменив hover функцию:
$("#menu a").hover(
function() {
//add 'background-color' as an inline css style which will have higher specificity than anything in the css.
$(this).addClass("hover").css('background-color', 'white');
}, function() {
$(this).removeClass("hover").css('background-color', '');
}
);
Ваша проблема в том, что что-то переписывает свой цвет фона. Используйте firebug или другой инспектор DOM, чтобы найти вашу проблему. Исправление, чтобы сделать ваш цвет фона важно, но вы должны использовать это только для тестирования:
background-color: black !important;
Если это работает, вам все еще нужно выяснить, что перезапись фона.
Затем вы можете сделать это с помощью чистого CSS
#menu a:hover {
background-color: black;
background-position: top center;
background-image: url("img/dot_hover.png");
background-repeat: no-repeat;
color: red;
}
Вы должны показать класс, не парения по умолчанию. –
Может быть, какое-то другое правило css переопределяет его на странице. – ShankarSangoli
Вам не нужно использовать '$ .hover()'; вы можете сделать это в чистом CSS, используя псевдо-класс ': hover'. – Bojangles