home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS :hover Selector: คู่มือการใช้งาน

CSS :hover selector เลือก element เมื่อ hover cursor ไปบน element นั้น เช่นใช้ :hover เปลี่ยนสี link เมื่อ hover

อาจต้องการ transition styles ที่ใช้กับ element บน web page เมื่อ user hover element นั้น

นี่คือที่มาของ CSS :hover selector :hover selector ให้ select elements เมื่อ mouse over ใช้ styles เมื่อ user hover element

บทเรียนอภิปรายพื้นฐาน selectors ใน CSS และการใช้ CSS :hover selector พร้อมตัวอย่าง จบแล้วคุณจะเป็น expert select elements ใช้ styles ด้วย :hover

CSS Selectors

ใน CSS selectors ใช้ select HTML elements ที่ต้องการ apply styles บน web page Selectors ให้เลือก elements ตาม id, class, group, attributes เพื่อใช้ styles เฉพาะกับ elements เฉพาะ

เช่น ต้องการให้ทุก

tags ใน HTML document มี hot pink background ใช้โค้ด:

h1 { background-color: hotpink; }

โค้ดใช้

selector select ทุก

tags บน web page ใน curly brackets ระบุ style ที่ต้องการใช้กับ

tags

CSS :hover Selector

CSS :hover selector select element เมื่อ hover mouse ไปบน element :hover ใช้กับ CSS element ใดๆ ได้ แต่ใช้บ่อยกับ links :hover ระบุหลังชื่อ element ที่ต้องการ select เช่น a:hover สำหรับ link

Scenario หลากหลายที่อาจใช้ :hover selector:

  • เปลี่ยนสี text เมื่อ user mouse over บรรทัดข้อความ
  • เปลี่ยนขนาด image เมื่อ user mouse over image
  • เปลี่ยนสี button เมื่อ user mouse over button

ในทุก use cases style เฉพาะถูกใช้เมื่อ user hover element ด้วย cursor

Syntax ของ :hover selector:

selector:hover { // CSS rules }

Components หลักของ :hover syntax:

  • selector = elements range ที่ :hover selector จะใช้ ถ้าต้องการ :hover effect trigger ตอน user hover

    element ระบุ h3

  • :hover สั่ง browser ให้ styles ใน CSS rule ใช้เฉพาะตอน user hover element ตาม selector property
  • CSS rules = styles ที่ควรใช้เมื่อ user hover elements ตาม selector เช่น font size สำหรับ text หรือ background color ของ
    tag หรือ border radius ของ field

มาดูตัวอย่างการใช้ CSS :hover selector

:hover CSS Examples

มีหลายวิธีใช้ :hover selector ด้านล่าง walk through common scenarios

CSS Hover Effect: เปลี่ยนสี Link

:hover selector ให้เปลี่ยนสี link เมื่อ user hover link

สมมติ design link ข้อความ Career Karma homepage ส่ง user ไป Career Karma site link ตั้งค่าแสดงสี lightgreen

ต้องการ link เปลี่ยนเป็น orange เมื่อ user hover cursor ใช้โค้ด:

<html> <a href="https://careerkarma.com">Career Karma homepage</a> <html> <style> a { color: lightgreen; } a:hover { color: orange; } <style>

CSS :hover Selector: คู่มือการใช้งาน กดปุ่มใน code editor ด้านบนเพื่อดู output

แยกโค้ด: HTML: tag link ไป Career Karma homepage CSS: 2 rules Rule แรก: ทุก tags text color = lightgreen ด้วย color property Rule ที่สอง: เปลี่ยนสี tag เป็น orange ตอน user hover ใช้ :hover selector

ตอน user hover ข้อความ Career Karma homepage สี link เปลี่ยนเป็น orange

CSS Hover Effect: แสดง Block ของ Text

:hover selector ใช้แสดง block of text เมื่อ user hover บรรทัดข้อความ

สมมติ design FAQ page สำหรับ Career Karma website ตอน user hover คำถาม block of text ควรปรากฏคำตอบ ใช้โค้ด:

<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>

CSS :hover Selector: คู่มือการใช้งาน กดปุ่มใน code editor ด้านบนเพื่อดู output

ใช้ tag สร้างคำถาม "What is Career Karma?" ปรากฏบน web page ใช้

tag มีคำตอบ

ใน CSS ใช้ styles สำหรับ

tag:

  • display: none ทำ
    tag invisible
  • background-color: orange ตั้ง background color
    = orange
  • CSS padding: 10px สร้าง gap 10px ระหว่างเนื้อหา
    และ borders

กำหนด rule ด้วย span:hover + div selector rule เปลี่ยน display rule ใน

tag เป็น block ทำให้ปรากฏ ตอน user hover tag (span:hover)
tag จะ visible

เปลี่ยน Image: CSS On Hover

Scenario อื่น: เปลี่ยน image บน web page ตอน user hover image ด้วย cursor

สมมติ design website ร้านกาแฟท้องถิ่น ตอน user hover stock image ของกาแฟบน About page image ใหม่ควรแทนที่ existing image image ใหม่ = stock image ของ café

โค้ดสำหรับ image hover effect:

<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 Selector: คู่มือการใช้งาน กดปุ่มใน code editor ด้านบนเพื่อดู output

กำหนด tag สร้าง image 750px tall x 1250px wide class = aboutImage

ใน CSS ประกาศ 2 rules Rule แรก: background image สำหรับ element class .aboutImage ใช้ stock photo กาแฟ Rule ที่สอง: .aboutImage:hover เปลี่ยน background image ของ element .aboutImage ที่ user hover image ใหม่ = stock image ของ café

Other Uses ของ :Hover Selector

เหมือนที่อภิปราย มีหลาย scenarios ที่ :hover selector มีประโยชน์ หาตัวอย่างเพิ่ม แนะนำอ่าน Career Karma tutorials อื่นๆ:

  • CSS Transition: สร้าง transitions ตอน user hover element
  • CSS Navigation Bar: สร้าง navigation bar ด้วย CSS
  • CSS Dropdown Menu: สร้าง dropdown menu ด้วย CSS

Hover selector ใช้สร้าง button hover effects เปลี่ยน appearance และ trigger hover animation

ยังมี guide on CSS selectors อ่านเพิ่มได้

สรุป

CSS :hover selector ให้ select element เมื่อ user hover element ด้วย cursor เมื่อ select element แล้ว ใช้ new set of styles ได้ styles เห็นได้จนกว่า user จะหยุด hover

บทเรียนอภิปรายพื้นฐาน CSS selectors และการใช้ :hover selector พร้อมตัวอย่าง ตอนนี้คุณพร้อมใช้ :hover selector เหมือน CSS expert!

คำแนะนำ top CSS learning resources, courses, books ดู How to Learn CSS guide