jQuery Mouseover Efekti – Üzerine Gelince İşlem Yaptırma
Merhaba, uzun zamandır ilk kez javascript serisi dışına çıkıyorum. Bu yazımda herkesin zaman zaman ihtiyaç duyduğu mouse efektlerinden bahsetmek istiyorum. Bazen sayfamızda mouse ile nesnelerin üzerlerine geldiğimizde bazı şekil değişiklikleri ya da davranışlar bekleriz. Ben bu yazıda bir <div> nesnesi üzerine gelindiğinde .css() metodunu kullanarak <div> nesnesi içini boyayacağım. Üzerinden gidildiğinde ise eski haline dönmesini yani transparan olmasını sağlayacağım. .css() metodu kullanımını bilmiyorsanız jquery .css() kullanımı başlıklı yazıyı okumanızı tavsiye ederim.
Bunu sağlayabilmek için jquery’nin .hover() özelliğini kullanacağım.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>scetinkaya.com jQuery .hover() özelliği</title> </head> <body style="background-color:#ccc"> <div>Ben bir div nesnesiyim.</div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> // sayfa hazır olduğunda $(document).ready(function(){ // div nesnesinin üzerine geldiğimde $("div").hover(function(){ // arka plan rengini sarı yap $(this).css("background-color","yellow"); // div nesnesinin üzerinden gettiğimde }, function(){ // arka plan rengini kaldır $(this).css("background-color","transparent"); }); }); </script> </body> </html> |
Yukarıdaki kodları index.html olarak kaydedin ve çalıştırın. Ben bir div nesnesiyim yazısı üzerine mouse ile geldiğinizde arka plan renginin sarı olduğunu, yazı üzerinden gittiğinizde ise tekrardan renksiz olduğunu göreceksiniz.
Siz de örnekleri çoğaltarak .hover() kullanımını pekiştirebilirsiniz. Ben burada div üzerine gelince işlem yaptırdım. Bu yazılık bu kadar. Bir sonraki yazıda görüşmek üzere.