Cara setting Style Onmouseover menggunakan Jquery


Berikut ini kita akan membahas bagaimana caranya mengatur css onmouseover yaitu efek sesuatu saat kursor mouse menyentuh object seperti yg kita harapkan seperti berupa animasi perubahan gelap - terang atau yang lainnya. Berikut ini ada sedikit script Jquery sederhana yang tentunya dapat dikembangkan sesuai imaginasi para sobat semua blogger :

<img class="img1" src="http://www.w3schools.com/css/klematis.jpg" width="150" height="113" alt="klematis">
<img src="http://www.w3schools.com/css/klematis2.jpg" width="150" height="113" alt="klematis">

<script>
$("img").mouseover(function() {
 $('img').css({opacity: '1.0', filter: 'alpha(opacity=100)'});
});
$("img").mouseout(function() {
 $('img').css({opacity: '0.4', filter: 'alpha(opacity=40)'});
});
</script>

Hasilnya silahkan arahkan kursor pada gambar :


klematis klematis


Smoga bermanfaat....
Previous
Next Post »