Mouseenter and mouseleave don't work properly [jQuery]



hi all, im new in this forum and pardon with my bad english.

iam also new to jquery and right now i am learnig about mouseenter and mouse leave. the image doesn't come out until i touch it with the cursor. it supposed to be already had an image before mouseenter and become bigger, then when mouseleave it become smaller...

the point is the image doesn't work properly...

i want to ask if there is wrong with my code and what was it?
thank you very much all.

		<title>ubah citra</title>
		<script src="jquery-1.12.3.js"></script>
			$(document).ready(function() {
				$("img").mouseenter(function() {
					var namaDepan = $(this).attr("id");
					$(this).attr("src", namaDepan + ".png");
				$("img").mouseleave(function() {
					var namaDepan = $(this).attr("id");
					$(this).attr("src", namaDepan + "_s.png");
		<style type="text/css">
			img {
				vertical-align: top;
		<img id="zombies2" src="zombies2_s.png">
		<img id="cover1" src="cover1_s.png">
		<img id="success2" src="success2_s.png">
		<img id="human2" src="human2_s.png">



Its working I tested it here

Check if you are correctly connected to the jQuery library


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.