Najechanie kursorem CSS a najechanie kursorem JavaScript [zamknięte]

Są chwile, kiedy mam wybór między używaniem elementu CSS: hover lub JavaScript onmouseover do kontrolowania wyglądu elementów html na stronie. Rozważmy następujący scenariusz, w którym element div zawija dane wejściowe

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

Chcę, aby dane wejściowe zmieniły kolor tła, gdy kursor myszy znajdzie się nad elementem div. Podejście CSS to

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

<div><input></div>

Podejście JavaScript jest

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

Jakie są zalety i wady każdego podejścia? Czy podejście CSS działa dobrze w większości przeglądarek internetowych? Czy JavaScript jest wolniejszy niż CSS?

Problem z: hover polega na tym, że IE6 obsługuje go tylko w linkach. Obecnie używam jQuery do tego typu rzeczy:

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

To znacznie ułatwia. To zadziała w IE6, FF, Chrome i Safari.

CSS jest znacznie łatwiejszy w utrzymaniu i czytelny.

Dlaczego nie oba? Użyj jQuery do animowanych efektów i CSS jako rezerwy. Daje to korzyści z jQuery z wdzięczną degradacją .

CSS:

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

jQuery (używa jQueryUI do animowania koloru):

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

próbny

Dodatkową korzyścią płynącą z robienia tego w javascript jest możliwość dodawania / usuwania efektu najechania w różnych momentach czasu - np. Najechanie kursorem na wiersze tabeli zmienia kolor, kliknięcie wyłącza efekt najechania kursorem i rozpoczyna edycję w miejscu.

Bardzo duża różnica polega na tym, że stan „: hover” jest automatycznie dezaktywowany, gdy myszka wychodzi z elementu. W rezultacie wszelkie style zastosowane po najechaniu myszą są automatycznie odwracane. Z drugiej strony, w przypadku podejścia javascript, musiałbyś zdefiniować zarówno zdarzenia „onmouseover”, jak i „onmouseout”. Jeśli zdefiniujesz tylko „onmouseover”, style zastosowane „onmouseover” będą zachowywać się nawet po wyprowadzeniu kursora myszy, chyba że wyraźnie zdefiniowałeś „onmouseout”.

EDYCJA: Ta odpowiedź nie jest już prawdą. CSS jest dobrze obsługiwany, a Javascript (czytaj: JScript) jest teraz prawie wymagany do każdego doświadczenia w Internecie, a niewielu ludzi wyłącza javascript.

Oryginalna odpowiedź, jak moja opinia w 2009 roku.

Z czubka mojej głowy:

Dzięki CSS możesz mieć problemy z obsługą przeglądarki.

Dzięki JScript ludzie mogą wyłączyć jscript (to właśnie robię).

Uważam, że preferowaną metodą jest tworzenie treści w HTML, Layout z CSS i cokolwiek dynamicznego w JScript. W tym przypadku prawdopodobnie chciałbyś zastosować podejście CSS.

Jest jeszcze jedna różnica, o której należy pamiętać między nimi. W CSS :hoverstan jest zawsze dezaktywowany, gdy mysz odsuwa się od elementu. Jednak w przypadku JavaScript onmouseoutzdarzenie nie jest wywoływane, gdy mysz przesuwa się z elementu do chrome przeglądarki, a nie na pozostałą część strony.

Dzieje się tak częściej, niż mogłoby się wydawać, zwłaszcza gdy tworzysz pasek nawigacyjny u góry strony z niestandardowymi stanami najechania kursorem.

W przeglądarce Internet Explorer należy zadeklarować <! DOCTYPE>, aby selektor: hover działał na innych elementach niż element <a>.

Używaj CSS, co znacznie ułatwia zarządzanie samym stylem.

W związku z używaniem jQuery do wykonania najechania kursorem , zawsze używam wtyczki HoverIntent, ponieważ nie uruchamia ona zdarzenia, dopóki nie zatrzymasz się nad elementem na krótki okres czasu ... to przestaje wyzwalać wiele myszy nad wydarzeniami, jeśli przypadkowo uruchomisz myszką nad nimi lub po prostu wybierając opcję.

Jeśli nie potrzebujesz 100% wsparcia dla IE6 z wyłączonym javascriptem, możesz użyć czegoś takiego jak ie7-js z komentarzami warunkowymi IE. Następnie po prostu użyj reguł css, aby zastosować efekty najechania. Nie wiem dokładnie, jak to działa, ale używa javascript, aby działać wiele reguł CSS, które normalnie nie działają w IE7 i 8.