CSS-зависание против JavaScript-указаний

Есть моменты, когда у меня есть выбор между использованием элемента CSS: hover или JavaScript onmouseover для управления внешним видом элементов html на странице. Рассмотрим следующий сценарий, когда div завершает ввод

<div>
<input id="input">
</div>

Я хочу, чтобы входной сигнал менял цвет фона, когда курсор мыши наводится на div. Подход CSS

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

Подход JavaScript

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

Каковы преимущества и недостатки каждого подхода? Подходит ли подход CSS к большинству веб-браузеров? Является ли JavaScript медленнее, чем css?

ОТВЕТЫ

Ответ 1

Проблема с: hover заключается в том, что IE6 поддерживает только ссылки. Я использую jQuery для такого рода вещей в наши дни:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

Делает вещи намного проще. Это будет работать в IE6, FF, Chrome и Safari.

Ответ 2

CSS один гораздо удобнее и удобочитаемо.

Ответ 3

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

Ответ 4

Почему бы и нет? Используйте jQuery для анимированных эффектов и CSS как резерв. Это дает вам преимущества jQuery с изящным деградации.

CSS

a {color: blue;}
a:hover {color: red;}

jQuery (использует jQueryUI для анимации цвета):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

демо

Ответ 5

В CSS-подход не требуется Javascript.

Ответ 6

EDIT: этот ответ больше не выполняется. CSS хорошо поддерживается, и Javascript (читайте: JScript) теперь в значительной степени требуется для любого веб-опыта, а некоторые люди отключают javascript.

Оригинальный ответ, как и мое мнение в 2009 году.

Сверху моей головы:

С CSS у вас могут возникнуть проблемы с поддержкой браузера.

С JScript люди могут отключить jscript (вот что я делаю).

Я считаю, что предпочтительный метод - это делать контент в HTML, макет с CSS и любой динамический в JScript. Таким образом, в этом случае вы, вероятно, захотите использовать подход CSS.

Ответ 7

Есть еще одна разница, чтобы иметь в виду между ними. С помощью CSS состояние :hover всегда деактивируется, когда мышь перемещается с элемента. Однако, с JavaScript, событие onmouseout не запускается, когда мышь перемещает элемент на браузер хром, а не на остальную часть страницы.

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

Ответ 8

Очень большая разница в том, что состояние ": hover" автоматически деактивируется, когда мышь перемещается из элемента. В результате любые стили, применяемые при наведении, автоматически меняются на противоположные. С другой стороны, с помощью javascript-подхода вам нужно будет определить как "onmouseover" , так и "onmouseout". Если вы определяете только "onmouseover" , стили, применяемые "onmouseover" , будут сохраняться даже после выключения мыши, если вы не указали явно "onmouseout".

Ответ 9

В Internet Explorer должен быть объявлен <! DOCTYPE > для селектора: hover для работы с другими элементами, кроме элемента <a> .

Ответ 10

Используйте CSS, он упрощает управление самим стилем.

Ответ 11

В соответствии с с помощью jQuery, чтобы сделать hover, я всегда использую плагин HoverIntent, так как он не запускает событие, пока вы не приостановите элемент за короткий промежуток времени... это прекращает отключение большого количества мышек над событиями, если вы случайно наводите указатель мыши на них или просто выбираете вариант.

Ответ 13

Если вам не нужна 100% -ная поддержка IE6 с отключенным javascript, вы можете использовать что-то вроде ie7-js с условными комментариями IE. Затем вы используете правила CSS для применения эффектов зависания. Я точно не знаю, как это работает, но он использует javascript для выполнения многих правил CSS-правил, которые обычно не выполняются в IE7 и 8.