JQuery Tips : เมธอด hover() กำหนดฟังก์ชันเมื่อมีการชี้เม้าส์ ใน Jquery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

JQuery Tips : เมธอด hover() กำหนดฟังก์ชันเมื่อมีการชี้เม้าส์ ใน Jquery

Post by abdkode » 27/03/2019 2:26 pm

ใน JQuery มีเมธอดมากมายที่สามารถนำมาประยุกต์ใช้เพื่อความสะดวกและเพิ่มสีสันหรือลูกเล่นมากมายให้มีความน่าสนใจมากขึ้น
ในบทความนี้จะมาแนะนำเมธอด hover()
เมธอด hover() เป็นเมธอดหนึ่งใน Jquery ที่ใช้ในการกำหนดสองฟังก์ชันที่จะเริ่มต้นเมื่อย้ายตัวชี้เมาส์มาวางเหนือองค์ประกอบหรือ element ที่กำหนด ซึ่งมีรูปแบบSyntaxดังนี้

Code: Select all

$(selector).hover(Function_in, Function_out);
พารามิเตอร์:รับมาสองพารามิเตอร์ดังนี้

Function_in : เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อตัวชี้เมาส์เริ่มเข้ามาในส่วนขององค์ประกอบที่กำหนด
Function_out : เป็นตัวเลือกเพิ่มเติ่ม(ไม่จำเป็น)เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์การปล่อยเม้าส์หรือเม้าส์เลื่อนออกจากelementนั้นๆ

ตัวอย่าง

Code: Select all

<html> 

<head> 
	<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
	<script> 
		<!-- jQuery code to show the working of hover() method -->
		$(document).ready(function() { 
			$("p").hover(function() { 
				$(this).css("background-color", "green"); 
			}, function() { 
				$(this).css("background-color", "yellow"); 
			}); 
		}); 
	</script> 
	<style> 
		p { 
			width: 55%; 
			height: 80px; 
			padding: 20px; 
			margin: 10px; 
			border: 2px solid navy; 
			font-size: 50px; 
		} 
	</style> 
</head> 

<body> 
	<!--move the mouse in and out over this paragraph 
		and background color will change-->
	<p>Mindphp !</p> 

</body> 

</html> 
ผลลัพธ์ที่ได้เมื่อเปิดผ่านเบราเซอร์
ก่อนที่ตัวชี้เมาส์จะชี้ไปยัง tag <p>
before mouseover.jpg
before mouseover.jpg (8.11 KiB) Viewed 1381 times
เมื่อตัวชี้เมาส์ชี้ไปยัง tag <p>
during mouseover.jpg
during mouseover.jpg (8.73 KiB) Viewed 1381 times
หลังจากตัวชี้เมาส์ออกจาก tag <p>
after mouseover.jpg
after mouseover.jpg (10.25 KiB) Viewed 1381 times
จากตัวอย่างโค้ดซึ่งได้กำหนดฟังก์ชันตัวแรกไว้ว่า เมื่อมีการชี้เม้าส์ไปยัง tag p ให้กำหนดสีพื้นหลังเป็นสีเขียว $(this).css("background-color", "green"); และฟังก์ชันที่เมื่อเม้าส์ออกจาก tag p ให้กำหนดสีพื้นหลังเป็นสีเหลือง $(this).css("background-color", "yellow"); ซึ่งผลลัพธ์ก็ออกมาดังที่แสดงครับ เราปรับเปลี่ยนจาก tag p เป็นชื่อคลาสหรือselectorอื่นๆได้ เช่น $(".className").hover(function() {....} เป็นต้น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests