CSS Hover Nedir?

25 Mart 2022 Mert Kocakaya 2 Yorum

Herkese merhabalar. Bu başlıkta CSS’in muhteşem bir özelliği olan “hover” özelliğinden bahsedeceğim. Özellikle son yıllarda kreatif web tasarımlarının kaçınılmaz parçası olan hover özelliği, daha yaratıcı ve dinamik web siteleriniz için de kullanabileceğiniz oldukça basit bir özelliktir. Hiç vakit kaybetmeden hemen bakalım!

CSS Hover Ne İşe Yarar?

Hani bazen, bazı web sitelerinde gezinirken, mouse imleciyle bir görselin üzerine geldiğinizde görsel büyür, ya da bir butonun üzerine geldiğinizde buton renk değiştirir, parlamaya başlar, işte bu harika özelliği yapmamızı sağlayan sır, CSS’in hover özelliğidir.

CSS hover özelliği ile kullandığınız nesnelerin, medya ve objelerin, divlerin ve contentlerin üzerine gelince çeşitli değişik biçim ve stillere sahip olmasını sağlayabilir, daha dikkat çekici broşür ve butonlar hazırlayabilirsiniz.

CSS Hover Nasıl Kullanılır?

Dilerseniz hiç vakit kaybetmeden CSS hover özelliğine canlı bir örnekle beraber bakalım. Örneğin biz, web sitemizdeki “Kayıt Ol” butonu için daha dikkat çekici ve kreatif bir şeyler yapmak istiyoruz. Kullanıcı butonun üzerine geldiği zaman arka plan rengi ve yazı rengi değişsin istiyoruz. Hemen butonumuzu ekleyerek işe koyulalım! :)

<input type="button" class="butonum" value="Kayıt Ol">

Butonumuzu ekledik, şimdi biraz da butonumuza biçim verelim.

<style>

.butonum {

width: 80px;

height: 35px;

font-weight: bold;

font-family: Times;

background: #3a3a98;

color: white;

cursor: default;

border: solid 1px grey;

}

</style>

css hover kullanimi

Harika! Butonumuzu hazırladık ve çıktısını yandaki gibi görebilirsiniz. Sıra geldi butonumuza hover özelliği eklemeye. Biz istiyoruz ki; kullanıcı mouse imlecini butonun üzerine getirdiği zaman butonumuzun arka planı beyaz olsun ve yazı rengi de bir önceki arka plan rengiyle aynı olsun. Yani renkler yer değiştirsin istiyoruz. Hemen kodlarımızı oluşturalım!

<style>

.butonum {

width: 80px;

height: 35px;

font-weight: bold;

font-family: Times;

background: #3a3a98;

color: white;

cursor: default;

border: solid 1px grey;

}

.butonum:hover {

background: white;

color: #3a3a98;

}

</style>

css hover nasil eklenir.gif

Harika! Hover özelliğimizi başarıyla ekledik ve yandaki gif üzerinde de görebileceğiniz gibi çalışıyor! Burada dikkat ettiyseniz sadece class’ımızın sonuna “:hover” yazdık. Yani hover edildiği, üzerine gelindiği zaman arkaplanımızı beyaz yap ve yazı rengimizi de bir önceki arka plan rengiyle aynı yap dedik.

Ancak burada bir şey dikkatinizi çekmiş olmalı. Hover özelliğimiz çok hızlı. Yani üzerine gelir gelmez biçimi değişiyor. Ancak biz belki de bunun daha yavaş olmasını istiyoruz. İşte bu noktada da “transition” özelliğinden faydalanacağız. Şimdi kodlarımıza şöyle bir ekleme yapacağım:

<style>

.butonum {

width: 80px;

height: 35px;

font-weight: bold;

font-family: Times;

background: #3a3a98;

color: white;

cursor: default;

border: solid 1px grey;

transition: all 1s;

}

.butonum:hover {

background: white;

color: #3a3a98;

}

</style>

css hover ayarlari.gif

Burada eklediğimiz “transition:” geçiş özelliği anlamına gelmektedir. Hemen yanında kullandığım all 1s ise bu nesnedeki tüm geçişleri 1 saniye gecikmeli yap demektir. Sizler bu kısımda dilerseniz “transition: background 1s;” diyerek sadece arkaplanı 1 saniyede geç diğerlerini hızlı geç de yapabilir veya kendi biçiminize göre düzenleyebilirsiniz. Ayrıca sadece hover için değil pek çok animasyon eklemeleri ve düzenlemelerinde de transition özelliği kullanılmaktadır. Hepsi bu kadar! Aklınıza takılan her şeyi bu başlık altında sorabilirsiniz! İyi çalışmalar dileriz! :)


2 YORUM
YORUM
Muhittin 22 Mart 2022 Hover Peki ya herhangi bir menüye tıkladığımız zaman, sadece o tıkladığımız menünün rengi alması ve diğer menülerin aynı renkte kalmasını masıl yapacağız? Belki de tam anlatamadım ama inşallah anlamışsınızdır

YORUM
Mert Kocakaya 22 Mart 2022 Hover Merhabalar. Burada genellikle kullanılan yöntem class ekleme yöntemdir. Örneğin "active" adında bir CSS classı yazarak bu classın rengini kırmızı yapıyoruz. Ardından hangi sayfayı açıyorsak menüde yer olan o linkin classına "active"yi eklyoruz. Bu sayede hangi sayfaya geçersek o sayfanın menüdeki linki kırmızı oluyor. Bunu da jQuery ile yapabilirsiniz. Örneğin "hakkımda" sayfası açıksa $("#hakkimda").addClass("active") diyerek eklenebilir. Saygılarımla

YORUM YAP