Javascript onMouseout ve onMouseover Nedir?

Javascript onMouseout ve onMouseover, Bu makalemizde HTML nesnelerinin ortak EventHandler’larından olan onMouseover ve onMouseout EventHandler’larını javascript ile kullanımını göreceğiz.

Javascript onMouseout ve onMouseover Nedir?

Javascript onMouseout ve onMouseover Nedir? Nasıl Kullanılır?

EventHandlerAçıklama
OnMouseOverMouse nesnenin üzerine geldiğinde tetiklenecek
OnMouseOutMouse nesnenin üzerinden ayrıldığında tetiklenecek olay

Şimdi bu örneğimizde türk bayrağı resminin üzerine gelindiğinde 9px boyutunda çerçeve eklenecek mouse ayrıldığında ise çevreve 0 olacak yani kaybolacaktır.

Html Örnek Kod

Javascript Örnek Kod

Demo

Özet

Aslında html elementleri üzerinde kullanabileceğiniz çok fazla event’ler bulunmaktadır ama bu makale’de sadece 2 event üzerinden basit bir örnek ile tanımladığımız bir html img elementi üzerine imleci götürdüğünüzde ve imleci img etiketi üzerinden çektiğinizde javascript tarafında tanımladığımız javascript fonksiyonlarının tetiklenmesini sağladık. Eğer tek ihtiyacınız bu örnekte ki gibi ilgili element üzerine gelindiğinde stil düzenlemesi yapmak ise css tarafında daha basit bir yolu olduğunu belirtmekte fayda var. Örnek olarak alttaki css örneği ile img elementi üzerine geldiğinizde img:hover css seçicisi devreye girecektir ve ayrıldığınızda varsayılan görünümüne geri dönecektir.

HTML

CSS

Demo


📚 Benzer Makaleler


Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.