Ö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>
