Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.Demo | İndirPrensip
Bu betiğin yaptığı şey, bağlantıları (A Etiketikleri) seçmek, içeriğini “.one” adındaki bir sınıfa dahil olan SPAN’a dahil etmek ve “.two” adında bir SPAN elementi oluşturmak. SPAN “iki” A etiketi ile aynı içeriği taşıyor ve bağlantı metninin hemen üzerine konumlandırılmış.

Başlangıçta ikinci SPAN gizli. A elementinin üzerine fare imleci getirildiğinde, “two” SPAN elementi jQuery’nin fadeToBetiği sitenize nasıl ekleyeceksiniz?
Adım 1 – JavaScript
Yukarıda verdiğim bağlantı üzerinden betiğimi ve jQuery kütüphanesini içerek betiği indirin ve sitenizde bir yere yarlaştırın. Ben genellikle tüm JavaScript dosyalarını ana dizindeki “/js” klasörü içerisine yerleştiririm. Ardından aşağıdaki kodu kullanarak jquery kütüphanesini ve renk geçiş betiğini içeren js dosyasını ekleyin.

Adım 2 – CSS
Aşağıdaki satırları CSS dosyanızın içerisine ekleyin. Bu bir demo olduğu için ben etiket seçicilerini kullandım. A için kullandığım stil öntanımlı olarak kullanılırken, SPAN için kullandığım stil fare imleci metnin üzerine getirildiğinde beliriyor.

a{color:#f30;font-weight:bold;text-decoration:none;}a span.two{color:#069;cursor:pointer;}

Adım 3 – Özelleştirmeler
CSS seçicilerinizin düzgün yazıldığına emin olun ki bu betiği seçici olarak ekleyebilirsiniz. Yoksa bu stil belgenizdeki tüm A etiketlerine uygulanır. Seçicileri özelleştirmek CSS üzerinden ve betik üzerinden de yapılmalı. Örneğin eğer bu efekti id=”content” kullanan bir div’e uygulamak istediğinizi varsayarak, kullanmanız gereken kod aşağıdaki gibi olmalı.

#content a{color:#f30;font-weight:bold;text-decoration:none;}#content a span.two{color:#069;cursor:pointer;}

fadeLinks.js dosyanızda da selector adındaki değişken de şu şekilde görüntülenmeli.

var selector = "#content a";

Eğer geçiş efektinin hızı yavaşsa o zaman “speed” değişkeninin değerini değiştirebilirsiniz. Yavaş için “hızlı”, normal için “normal”, hızlı için “fast” değerini kullanın.Betik, Windows’ta FF, IE7 ve Opera üzerinde, Mac’te FF ve Safari üzerinde denendi.Demo | İndirKaynak: CSS Globe