1. Ana Sayfa
  2. jQuery
  3. jQuery Dersleri – mouseover ve mouseleave olayları

jQuery Dersleri – mouseover ve mouseleave olayları

Önceki dersimizde jQuery click ve dblclickolaylarından bahsetmiştik, bu dersimizde mouseover ve mouseleave olaylarını inceleyeceğiz. mouseover nesnenin üzerine fare geldiğinde çalışan , mouseleave ise nesnenin üzerinden fare çekildiği zaman çalışır. Aşağıda ki uygulamada div’lerle yerleştirdiğimiz dört kutuya sayfa üzerinden verdiğimiz stilde zemin rengi sarı olarak ayarlandı. Daha sonra
div nesnesine atadığımız seçici ile fare üzerine geldiğinde “$(“div”).mouseover” olayı ile zemin rengini kırmızı yapıyoruz. daha sonra $(“div”).mouseleave ile tekrar sarı yapıyoruz. Uygulamanın kodları ve çalışan hali aşağıda…

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilişim Öğretmeni jQuery Dersleri dblclick olayı</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">  </script>
<script type="text/javascript"> 
 $("document").ready(function(){ 
 $("div").mouseover(function(){ 
 $(this).css({background:"red"}); 
 }); 
  $("div").mouseleave(function(){ 
 $(this).css({background:"yellow"}); 
 }); 
}); 
 </script> 
 <style type="text/css"> 
  div { 
 background:yellow; 
  width: 60px; 
  height:60px; 
  float:left; 
 margin:10px; 
 cursor:pointer; 
 } 
 </style> 
</head>
<body>
<p>Fareyi Kutuların Üstüne Getir... :)</p> 
  <div></div> 
 <div></div> 
 <div></div> 
<div></div> 
</body>
</html>

Yorum Yap

Kimler Neler Demiş?

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir