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?

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

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

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

CSS намного удобнее в обслуживании и удобочитаемости.

Почему не оба? Используйте 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);
  }
);

демо

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

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

РЕДАКТИРОВАТЬ: этот ответ больше не соответствует действительности. CSS хорошо поддерживается, и Javascript (читай: JScript) теперь в значительной степени требуется для любого веб-опыта, и некоторые люди отключают javascript.

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

С верхней части моей головы:

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

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

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

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

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

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

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

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

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