ตัวเลือก CSS :hover จะเลือกองค์ประกอบเมื่อคุณวางเคอร์เซอร์ไว้เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์ของคุณ ตัวอย่างเช่น คุณสามารถใช้ :hover เพื่อเปลี่ยนสีของลิงก์เมื่อคุณวางเมาส์เหนือลิงก์

คุณอาจต้องการเปลี่ยนสไตล์ที่ใช้กับองค์ประกอบบนหน้าเว็บของคุณเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบนั้น

นั่นคือที่มาของ CSS :hover selector :hover selector ให้คุณเลือกองค์ประกอบเมื่อคุณวางเมาส์เหนือองค์ประกอบเหล่านั้น วิธีนี้ทำให้คุณสามารถใช้สไตล์เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ

บทช่วยสอนนี้จะอธิบายพร้อมตัวอย่าง พื้นฐานของตัวเลือกใน CSS และวิธีใช้ CSS :hover selector ในตอนท้ายของบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการเลือกองค์ประกอบที่ควรใช้สไตล์โดยใช้ :hover

ตัวเลือก CSS

ใน CSS ตัวเลือกจะใช้เพื่อเลือกองค์ประกอบ HTML ที่คุณต้องการใช้สไตล์บนหน้าเว็บ ตัวเลือกช่วยให้คุณเลือกองค์ประกอบตามรหัส คลาส กลุ่ม หรือแอตทริบิวต์ เพื่อให้คุณสามารถใช้สไตล์บางอย่างกับองค์ประกอบเฉพาะได้

ตัวอย่างเช่น สมมติว่าคุณต้องการสร้างแท็ก

ทั้งหมดในเอกสาร HTML ให้ปรากฏโดยมีพื้นหลังสีชมพูร้อน คุณสามารถทำได้โดยใช้รหัสนี้:

h1 {
	background-color: hotpink;
}

ในรหัสนี้ เราใช้ตัวเลือก

ซึ่งใช้เพื่อเลือกแท็ก

ทั้งหมดบนหน้าเว็บ จากนั้น เราระบุรูปแบบที่ต้องการใช้กับแท็ก

ในหน้าเว็บ ซึ่งอยู่ภายในวงเล็บปีกกา

CSS :ตัวเลือกโฮเวอร์

CSS :hover ตัวเลือกจะเลือกองค์ประกอบเมื่อคุณวางเมาส์เหนือองค์ประกอบนั้น :hover สามารถใช้กับองค์ประกอบ CSS ใดก็ได้ แต่มักใช้กับลิงก์ :hover ถูกระบุหลังชื่อขององค์ประกอบที่คุณต้องการเลือก เช่น a:hover สำหรับลิงก์

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

มีสถานการณ์ต่างๆ มากมายที่คุณอาจต้องการใช้ตัวเลือก :hover ต่อไปนี้คือกรณีการใช้งานที่เป็นไปได้บางประการสำหรับตัวเลือก:

เปลี่ยนสีของข้อความเมื่อผู้ใช้วางเมาส์เหนือบรรทัดข้อความ
การเปลี่ยนขนาดของรูปภาพเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ
เปลี่ยนสีของปุ่มเมื่อผู้ใช้วางเมาส์เหนือปุ่ม

ในกรณีการใช้งานเหล่านี้ ลักษณะเฉพาะจะถูกนำไปใช้เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบด้วยเคอร์เซอร์

ไวยากรณ์สำหรับตัวเลือก :hover มีดังต่อไปนี้:

selector:hover {
	// CSS rules
}

นี่คือองค์ประกอบหลักของ :hover ไวยากรณ์:

ตัวเลือก คือช่วงขององค์ประกอบที่จะใช้ตัวเลือก :hover ดังนั้น หากคุณต้องการให้เอฟเฟกต์ :hover ทริกเกอร์ทุกครั้งที่ผู้ใช้วางเมาส์เหนือองค์ประกอบ
คุณจะต้องระบุ h3 .
:โฮเวอร์ แนะนำเบราว์เซอร์ว่าควรใช้สไตล์ในกฎ CSS เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบบางอย่างเท่านั้น องค์ประกอบนี้มาจาก ตัวเลือก ทรัพย์สิน
กฎ CSS เป็นสไตล์ที่ควรใช้เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบที่กำหนดโดย ตัวเลือก . ตัวอย่างเช่น คุณสามารถระบุขนาดแบบอักษรสำหรับข้อความหรือสีพื้นหลังของแท็ก
หรือคุณสามารถระบุรัศมีเส้นขอบของฟิลด์

มาดูตัวอย่างกันเพื่อสาธิตว่าคุณในฐานะนักพัฒนาเว็บสามารถใช้ CSS :hover selector ได้อย่างไร

:โฮเวอร์ตัวอย่าง CSS

มีหลายวิธีที่จะใช้ตัวเลือก :hover ด้านล่างนี้ เราจะอธิบายสถานการณ์ทั่วไปสองสามอย่างที่อาจมีประโยชน์ :hover selector

เอฟเฟกต์ CSS Hover:เปลี่ยนสีของลิงก์

ตัวเลือก :hover ช่วยให้เราสามารถเปลี่ยนสีของลิงก์เมื่อผู้ใช้วางเมาส์เหนือลิงก์

สมมติว่าเรากำลังออกแบบลิงก์ที่มีข้อความ หน้าแรกของ Career Karma และส่งผู้ใช้ไปยังไซต์ Career Karma ลิงก์นี้ตั้งค่าให้ปรากฏในสี เขียวอ่อน บนหน้าเว็บของเรา

เราต้องการให้ลิงก์เปลี่ยนเป็น สีส้ม เมื่อผู้ใช้วางเมาส์เหนือลิงก์ด้วยเคอร์เซอร์ ในการสร้างเอฟเฟกต์นี้ เราสามารถใช้รหัสต่อไปนี้:

<html>

<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
  
<style>

a {
	color: lightgreen;
}

a:hover {
	color: orange;
}
<style>

CSS Hover:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

มาทำลายโค้ดของเรากัน

ในไฟล์ HTML เรากำหนดลิงก์ไปยังหน้าแรกของ Career Karma โดยใช้แท็ก จากนั้นในโค้ด CSS ของเรา เราจะกำหนดกฎสองข้อ

กฎข้อแรกใช้กับแท็ก HTML ทั้งหมดบนหน้าเว็บของเรา กฎของเรากำหนดสีข้อความของแท็ก ทั้งหมดเป็น สีเขียวอ่อน โดยใช้ สี ทรัพย์สิน

กฎข้อที่สองเปลี่ยนสีของแท็ก บนหน้าเว็บเป็นสีส้มเมื่อผู้ใช้วางเมาส์เหนือแท็ก ทำได้โดยใช้ตัวเลือก :hover

ดังนั้นเมื่อผู้ใช้วางเมาส์เหนือข้อความ หน้าแรกของ Career Karma , สีของลิงค์จะเปลี่ยนเป็นสีส้ม

เอฟเฟกต์ CSS Hover:แสดงบล็อกข้อความ

นอกจากนี้ยังสามารถใช้ตัวเลือก :hover เพื่อแสดงกลุ่มข้อความเมื่อผู้ใช้วางเมาส์เหนือบรรทัดข้อความ

สมมติว่าเรากำลังออกแบบหน้าคำถามที่พบบ่อยสำหรับเว็บไซต์ Career Karma เมื่อผู้ใช้วางเมาส์เหนือคำถาม กลุ่มข้อความควรปรากฏขึ้นพร้อมคำตอบสำหรับคำถามของพวกเขา เราสามารถสร้างคำถามตัวอย่างโดยใช้รหัสนี้:

<html>

<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>
<html>
  
<style>

div {
	display: none;
	background-color: orange;
	padding: 10px;
}

span:hover + div {
	display: block;
}
<style>

ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เราใช้แท็ก เพื่อสร้างคำถามว่า "อาชีพกรรมคืออะไร" ที่ปรากฏบนหน้าเว็บของเรา จากนั้น เราใช้แท็ก

ซึ่งมีคำตอบสำหรับคำถาม

ในไฟล์ CSS ของเรา เราใช้สไตล์ต่อไปนี้สำหรับแท็ก

ของเรา:

display:none ซึ่งทำให้แท็ก
ของเรามองไม่เห็น
สีพื้นหลัง:สีส้ม ซึ่งกำหนดสีพื้นหลังของแท็ก
เป็นสีส้ม
CSS padding:10px ซึ่งสร้างช่องว่าง 10px ระหว่างเนื้อหาของแท็ก
และเส้นขอบ

จากนั้นเรากำหนดกฎโดยใช้ตัวเลือก span:hover + div กฎนี้เปลี่ยนรูปแบบของ การแสดงผล กฎในแท็ก

ของเราเพื่อ บล็อก ซึ่งทำให้ปรากฏ ดังนั้น เมื่อผู้ใช้วางเมาส์เหนือแท็ก ของเรา (แสดงโดย span:hover) แท็ก

จะปรากฏให้เห็น

เปลี่ยนรูปภาพ:CSS On Hover

อีกสถานการณ์หนึ่งที่สามารถใช้ตัวเลือก :hover คือการเปลี่ยนรูปภาพบนหน้าเว็บ รูปภาพจะเปลี่ยนไปเมื่อผู้ใช้วางเมาส์เหนือรูปภาพด้วยเคอร์เซอร์คอมพิวเตอร์

สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับร้านกาแฟในท้องถิ่น เมื่อผู้ใช้วางเมาส์เหนือภาพสต็อกของกาแฟในเกี่ยวกับ หน้า รูปภาพใหม่ควรแทนที่รูปภาพที่มีอยู่ ภาพใหม่ควรเป็นภาพสต็อกของร้านกาแฟ

เราสามารถใช้โค้ดต่อไปนี้เพื่อทำเอฟเฟกต์โฮเวอร์รูปภาพให้สำเร็จ:

<html>

<img height="750" width="1250" class="aboutImage" />
<html>
  
<style>

.aboutImage {
	background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}

.aboutImage:hover {
	background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
<style>

CSS Hover:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เรากำหนดแท็ก ซึ่งสร้างรูปภาพที่มีความสูง 750px กว้าง 1250px คลาสที่กำหนดให้กับแท็กเรียกว่า aboutImage .

ในไฟล์ CSS ของเรา เราได้ประกาศกฎสองข้อ

กฎข้อแรกตั้งค่าภาพพื้นหลังให้แสดงในองค์ประกอบที่มีชื่อคลาส .aboutImage. เราใช้ภาพสต็อกของกาแฟเป็นภาพพื้นหลัง

กฎข้อที่สอง .aboutImage:hover เปลี่ยนภาพพื้นหลังขององค์ประกอบด้วยคลาส .aboutImage ที่ผู้ใช้วางเมาส์เหนือ ภาพใหม่ที่ปรากฏขึ้นเป็นภาพสต็อกของร้านกาแฟ

การใช้งานอื่นๆ ของ :Hover Selector

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ มีหลายสถานการณ์ที่ตัวเลือก :hover จะมีประโยชน์ หากคุณกำลังมองหาตัวอย่างเพิ่มเติมของ :hover selector ในการดำเนินการ เราขอแนะนำให้ดูบทแนะนำ Career Karma อื่นๆ เหล่านี้:

การเปลี่ยน CSS:คำแนะนำเกี่ยวกับวิธีสร้างการเปลี่ยนที่ปรากฏขึ้นเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบบนหน้าเว็บ
CSS Navigation Bar:คำแนะนำในการสร้างแถบนำทางโดยใช้ CSS
CSS Dropdown Menu:คำแนะนำในการสร้างเมนูแบบเลื่อนลงโดยใช้ CSS

ตัวเลือกโฮเวอร์ยังใช้เพื่อสร้างเอฟเฟกต์โฮเวอร์ของปุ่มอีกด้วย เอฟเฟกต์เหล่านี้เปลี่ยนรูปลักษณ์ของปุ่มและทริกเกอร์แอนิเมชั่นเมื่อวางเมาส์เหนือ

เรายังมีคำแนะนำเกี่ยวกับตัวเลือก CSS ซึ่งคุณสามารถอ่านเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกอื่นๆ

บทสรุป

ตัวเลือก CSS :hover ให้คุณเลือกองค์ประกอบเมื่อผู้ใช้วางเคอร์เซอร์เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์ เมื่อเลือกองค์ประกอบแล้ว คุณจะใช้ชุดสไตล์ใหม่ได้ โดยจะมองเห็นได้จนกว่าผู้ใช้จะหยุดวางเมาส์เหนือองค์ประกอบด้วยเคอร์เซอร์

บทช่วยสอนนี้กล่าวถึงตัวอย่าง พื้นฐานของตัวเลือก CSS และวิธีใช้ตัวเลือก :hover ตอนนี้คุณก็พร้อมที่จะเริ่มใช้ :hover selector เหมือนผู้เชี่ยวชาญ CSS แล้ว!

สำหรับคำแนะนำเกี่ยวกับทรัพยากรการเรียนรู้ CSS หลักสูตรและหนังสือชั้นนำ โปรดดูคู่มือ CSS วิธีเรียนรู้ของเรา

CSS Hover:A How-To Guide