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

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

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

โพสต์โดย abdkode » 27/03/2019 2:26 pm

ใน 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
before mouseover.jpg (8.11 KiB) เปิดดู 1033 ครั้ง

เมื่อตัวชี้เมาส์ชี้ไปยัง tag <p>
during mouseover.jpg
during mouseover.jpg (8.73 KiB) เปิดดู 1033 ครั้ง

หลังจากตัวชี้เมาส์ออกจาก tag <p>
after mouseover.jpg
after mouseover.jpg (10.25 KiB) เปิดดู 1033 ครั้ง

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน