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 | Ä°ndir

Prensip
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 fadeTo

Her zaman olduğu gibi IE yine problem çıkarıyor ve bu sebeple bunu çözecek bir yöntem uygulamak zorunda kaldık. Çünkü bir metin IE üzerinde yavaşça belirginleşirken IE o metnin görünümünü çirkinleştiriyor, bu sebeple de ilgili elemente bir arkaplan rengi uygulamamız gerekiyor.

Betiğ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.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fadeLinks.js"></script>

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 | Ä°ndir

Kaynak: CSS Globe