ใน
JQuery มีเมธอดมากมายที่สามารถนำมาประยุกต์ใช้เพื่อความสะดวกและเพิ่มสีสันหรือลูกเล่นมากมายให้มีความน่าสนใจมากขึ้น
ในบทความนี้จะมาแนะนำเมธอด hover()
เมธอด hover() เป็นเมธอดหนึ่งใน Jquery ที่ใช้ในการกำหนดสองฟังก์ชันที่จะเริ่มต้นเมื่อย้ายตัวชี้เมาส์มาวางเหนือองค์ประกอบหรือ
element ที่กำหนด ซึ่งมีรูปแบบSyntaxดังนี้
โค้ด: เลือกทั้งหมด
$(selector).hover(Function_in, Function_out);
พารามิเตอร์:รับมาสองพารามิเตอร์ดังนี้
Function_in : เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อตัวชี้เมาส์เริ่มเข้ามาในส่วนขององค์ประกอบที่กำหนด
Function_out : เป็นตัวเลือกเพิ่มเติ่ม(ไม่จำเป็น)เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์การปล่อยเม้าส์หรือเม้าส์เลื่อนออกจากelementนั้นๆ
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<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 (8.11 KiB) Viewed 3137 times
เมื่อตัวชี้เมาส์ชี้ไปยัง tag <p>
- during mouseover.jpg (8.73 KiB) Viewed 3137 times
หลังจากตัวชี้เมาส์ออกจาก tag <p>
- after mouseover.jpg (10.25 KiB) Viewed 3137 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
ใน [url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]JQuery[/url] มีเมธอดมากมายที่สามารถนำมาประยุกต์ใช้เพื่อความสะดวกและเพิ่มสีสันหรือลูกเล่นมากมายให้มีความน่าสนใจมากขึ้น
ในบทความนี้จะมาแนะนำเมธอด hover()
เมธอด hover() เป็นเมธอดหนึ่งใน Jquery ที่ใช้ในการกำหนดสองฟังก์ชันที่จะเริ่มต้นเมื่อย้ายตัวชี้เมาส์มาวางเหนือองค์ประกอบหรือ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url] ที่กำหนด ซึ่งมีรูปแบบSyntaxดังนี้
[code]$(selector).hover(Function_in, Function_out);[/code]
[b]พารามิเตอร์[/b]:รับมาสองพารามิเตอร์ดังนี้
Function_in : เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อตัวชี้เมาส์เริ่มเข้ามาในส่วนขององค์ประกอบที่กำหนด
Function_out : เป็นตัวเลือกเพิ่มเติ่ม(ไม่จำเป็น)เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์การปล่อยเม้าส์หรือเม้าส์เลื่อนออกจากelementนั้นๆ
[b]ตัวอย่าง[/b]
[code]<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>
[/code]
[b]ผลลัพธ์ที่ได้เมื่อเปิดผ่านเบราเซอร์[/b]
ก่อนที่ตัวชี้เมาส์จะชี้ไปยัง tag <p>
[attachment=2]before mouseover.jpg[/attachment]
เมื่อตัวชี้เมาส์ชี้ไปยัง tag <p>
[attachment=0]during mouseover.jpg[/attachment]
หลังจากตัวชี้เมาส์ออกจาก tag <p>
[attachment=1]after mouseover.jpg[/attachment]
จากตัวอย่างโค้ดซึ่งได้กำหนดฟังก์ชันตัวแรกไว้ว่า เมื่อมีการชี้เม้าส์ไปยัง tag p ให้กำหนดสีพื้นหลังเป็นสีเขียว $(this).css("background-color", "green"); และฟังก์ชันที่เมื่อเม้าส์ออกจาก tag p ให้กำหนดสีพื้นหลังเป็นสีเหลือง $(this).css("background-color", "yellow"); ซึ่งผลลัพธ์ก็ออกมาดังที่แสดงครับ เราปรับเปลี่ยนจาก tag p เป็นชื่อคลาสหรือ[url=https://mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/2780-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-3-jquery-selectors-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1.html]selector[/url]อื่นๆได้ เช่น $(".className").hover(function() {....} เป็นต้น
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]