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
