ในบทความนี้จะมาแนะนำเมธอด 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> เมื่อตัวชี้เมาส์ชี้ไปยัง tag <p> หลังจากตัวชี้เมาส์ออกจาก tag <p> จากตัวอย่างโค้ดซึ่งได้กำหนดฟังก์ชันตัวแรกไว้ว่า เมื่อมีการชี้เม้าส์ไปยัง 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