Как я могу изменить CSS (BG Color) определенного элемента с событиями JavaScript Hover?

Question

Пожалуйста, будьте терпеливы со мной, так как я довольно новый программист и крайне незнаком с программированием на стороне клиента. Это мой первый живой проект, и я хочу сделать немало вещей, о которых мне неизвестно.

Соответствующую страницу можно найти по адресу http://paysonfirstassembly.com/

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

Кроме того, если это помогает, я использую JQuery.

Answer 1

Вы используете CSS, а не jQuery для подобных вещей.

В своей таблице стилей просто добавьте селектор :hover к стилю CSS элемента.Это замедление нового стиля отображается при наведении элемента:

#original_element {
  background-color: blue;
}

#original_element:hover, .hover {
  background-color: red;
}

Для поддержки этих бедных людей с IE6 и JS (это работает и для тех, у кого нет JS), вы можете использовать функцию jQuery:

$('#original_element').hover(function() {
  $(this).addClass('hover');
}, function {
  $(this).removeClass('hover');  
});

Answer 2

$(ELEMENT).hover(
    function(){
        $(this).css('background-color','red');
    },
    function(){
        // this is for 'mouse-out' event
    }
);

Кстати: лучше назначить класс CSS, для которого задан этот цвет фона (+ любые дополнительные стили), тогда вы можете сделать это:*

.highlightClass {background-color:yellow;}

Answer 3

$('#test').hover(function() {
    $(this).css('backgroundColor', 'blue')
}, function() {
    $(this).css('backgroundColor', 'red')
})

Проверьте рабочий пример на http://jsfiddle.net/KW5mJ/

Answer 4

Вы можете искать это:

$(selector).hover(
    function() { $(this).css('background-color', 'red'); },
    function() { $(this).css('background-color', 'green'); },
);