Как проще всего реализовать изменение цвета фона при наведении курсора на элементы HTML?

Question

У меня есть следующие стили:

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.buttonMouseover {
    background-color: darkGoldenRod;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

И следующий код javascript (мой первый кстати):

function backgroundChangeIn(element){
    if (element.className = "a.button"){element.className = "buttonMouseover";}
}
function backgroundChangeOut(element){
    if (element.className = "a.buttonMouseover"){element.className = "button";}
}

И, следующий элемент, который должен изменить фон при наведении мыши:

<a class="button" href="" onmouseover="backgroundChangeIn(this)" onmouseout="backgroundChangeOut(this)">A Button</a>

Пока это работает для меня. Но мне было интересно, есть ли лучший способ.

(извините за весь код)

Answer 1

В зависимости от ваших целевых браузеров, вы можете использовать псевдотег hover.

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.button:hover {
    background-color: darkGoldenRod;
}

Вот немного документации об этом в w3schools . Похоже, что он хорошо поддерживается во всех удаленно современных браузерах.

Обратите внимание, что применяются как нормальный, так и правила стиля наведения, при этом наведение имеет приоритет. Так что вам просто нужно внести изменения в правило наведения.

Answer 2

sblundy имеет право на основы. Чтобы добавить это, все современные браузеры позволят вам использовать псевдоэлемент hover на , однако IE6 не распознает это ни на одном другом элементе.

В IE6 вам понадобится какой-то JavaScript, чтобы добавить имя класса при наведении курсора. Мне нравится использовать jQuery, и я бы сделал так:

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

, который дал бы всем элементам с классом 'hoverable' класс зависания при наведении на них курс.

Answer 3

a.button, a.button:hover {
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.button {
    background-color: orange;
}

a.button:hover {
    background-color: darkGoldenRod;
}

И

<a class="button" href="">A Button</a>

Answer 4

Вы можете использовать библиотеку типа jQuery , чтобы упростить задачу.