Наведення курсора на CSS проти наведення курсора на JavaScript [закрито]

Бувають випадки, коли у мене є вибір між використанням елемента CSS: наведення курсору або 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".

EDIT: Ця відповідь більше не відповідає дійсності. 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.