CSS üzerine gelme ve JavaScript fareyle üzerine gelme [kapalı]

Bir CSS öğesi kullanmak arasında seçim yapabileceğim zamanlar vardır: html öğelerinin bir sayfadaki görünümünü kontrol etmek için fareyle üzerine gelme veya JavaScript üzerinde fareyle üzerine gelme. Bir div'in bir girdiyi sarmaladığı aşağıdaki senaryoyu düşünün

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

Fare imleci div'in üzerine geldiğinde girdinin arka plan rengini değiştirmesini istiyorum. CSS yaklaşımı

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

<div><input></div>

JavaScript yaklaşımı

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

Her yaklaşımın avantajları ve dezavantajları nelerdir? CSS yaklaşımı çoğu web tarayıcısı ile iyi çalışıyor mu? JavaScript css'den daha mı yavaş?

: Hover ile ilgili sorun, IE6'nın bunu yalnızca bağlantılarda desteklemesidir. Bugünlerde bu tür şeyler için jQuery kullanıyorum:

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

İşleri çok daha kolaylaştırır. Bu, IE6, FF, Chrome ve Safari'de çalışacaktır.

CSS olanı çok daha sürdürülebilir ve okunabilir.

Neden ikisi de olmasın? Animasyonlu efektler için jQuery'yi ve yedek olarak CSS'yi kullanın. Bu size jQuery'nin avantajlarını zarif bir şekilde düşürerek verir .

CSS:

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

jQuery ( renge animasyon uygulamak için jQueryUI kullanır ):

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

demo

Bunu javascript'te yapmanın bir başka yararı da, farklı zamanlarda fareyle üzerine gelme efektini ekleyip kaldırabilmenizdir - örneğin, tablo satırlarının üzerine gelmek renk değiştirir, tıklama fareyle üzerine gelme efektini devre dışı bırakır ve yer modunda düzenlemeyi başlatır.

Çok büyük bir fark, fare öğenin dışına çıktığında ": hover" durumunun otomatik olarak devre dışı bırakılmasıdır. Sonuç olarak, fareyle üzerine gelindiğinde uygulanan tüm stiller otomatik olarak tersine çevrilir. Öte yandan, javascript yaklaşımı ile hem "onmouseover" hem de "onmouseout" olaylarını tanımlamanız gerekir. Eğer sadece "onmouseover" ı tanımlarsanız, "onmouseover" uygulanan stiller, "onmouseout" u açıkça tanımlamadıkça fareyi kaldırdıktan sonra bile devam edecektir.

DÜZENLEME: Bu yanıt artık geçerli değil. CSS iyi destekleniyor ve Javascript (okuma: JScript) artık herhangi bir web deneyimi için oldukça gerekli ve çok az kişi JavaScript'i devre dışı bırakıyor.

Benim fikrim gibi orijinal cevap 2009'da.

Kafamın üstünden:

CSS ile tarayıcı desteğiyle ilgili sorunlarınız olabilir.

JScript ile insanlar jscript'i devre dışı bırakabilir (yaptığım şey budur).

Tercih edilen yöntemin içeriği HTML, CSS ile Düzen ve JScript'te dinamik yapmak olduğuna inanıyorum. Yani bu durumda, muhtemelen CSS yaklaşımını almak isteyeceksiniz.

İkisi arasında akılda tutulması gereken başka bir fark var. CSS ile, fare bir öğeden çıktığında :hoverdurum her zaman devre dışı bırakılır. Ancak JavaScript ile, onmouseoutfare öğeden çıkıp sayfanın geri kalanına değil tarayıcı kromuna gittiğinde olay tetiklenmez.

Bu, özellikle sayfanızın üstünde özel fareyle üzerine gelme durumlarıyla bir gezinti çubuğu oluşturduğunuzda, düşündüğünüzden daha sık gerçekleşir.

Internet Explorer'da: hover seçicinin <a> öğesi dışındaki diğer öğeler üzerinde çalışması için bir <! DOCTYPE> bildirilmesi gerekir.

CSS kullanın, stilin kendisinin çok daha kolay yönetilmesini sağlar.

Fareyle üzerine gelme yapmak için jQuery'nin kullanılmasıyla ilgili olarak, bir öğenin üzerinde kısa bir süre duraklayana kadar olayı tetiklemediği için her zaman HoverIntent eklentisini kullanırım ... fareyi üzerlerine getirin veya sadece bir seçenek belirlerken.

Javascript devre dışı bırakıldığında IE6 için% 100 desteğe ihtiyacınız yoksa , IE koşullu yorumları olan ie7-js gibi bir şey kullanabilirsiniz . Ardından, vurgulu efektleri uygulamak için sadece css kurallarını kullanırsınız. Tam olarak nasıl çalıştığını bilmiyorum ama normalde IE7 ve 8'de olmayan birçok css kuralını çalıştırmak için javascript kullanıyor.