Cascading Style Sheets (CSS) ได้รับการออกแบบโดยใช้ หรือ XML (รวมถึงรูปแบบ XHTML, SVG) เป็นภาษาสไตล์ชีตที่ใช้เพื่ออธิบายองค์ประกอบเป็นหลักผ่านวิธีการจัดรูปแบบที่หลากหลาย วิธีหนึ่งคือการวางเมาส์และในบทความนี้เราจะทำความเข้าใจ Hover ใน CSS ในลักษณะต่อไปนี้:
- โฮเวอร์ใน CSS คืออะไร?
- ใช้ Hover ที่ไหน
- โฮเวอร์ทำอะไร?
- ความเข้ากันได้
- มันทำงานอย่างไร?
- เลื่อนสีพื้นหลังเปลี่ยนเป็น 'สีแดง'
- การสร้าง Hover Opacity บนรูปภาพ
- การสร้างข้อความซ้อนทับบนรูปภาพ
โฮเวอร์ใน CSS คืออะไร?
CSS hover เป็นส่วนประกอบตัวเลือกที่ใช้เพื่อจัดรูปแบบองค์ประกอบต่างๆเมื่อตัวชี้เมาส์วางเมาส์เหนือองค์ประกอบเหล่านั้น สามารถใช้ได้กับเกือบทุกองค์ประกอบ HTML คุณลักษณะโฮเวอร์ใน CSS มีความสำคัญอย่างมากในการออกแบบหน้าเว็บ
ส่วนประกอบโฮเวอร์สามารถเน้นเข้ารหัสและปรับแต่งหน้าเว็บตามความชอบของผู้ใช้ในโปรแกรมออกแบบเว็บที่กะทัดรัดและมีประสิทธิภาพ
ใช้ Hover ที่ไหน
ตัวอย่างที่พบบ่อยที่สุดเกี่ยวกับความสามารถในการทำงานของคุณลักษณะโฮเวอร์สามารถเน้นได้ในเว็บไซต์ช็อปปิ้งหลัก ๆ เช่น Flipkart และ Amazon เมื่อผู้ใช้วางเมาส์บนผลิตภัณฑ์ใด ๆ บนเว็บไซต์อีคอมเมิร์ซเหล่านี้ผลิตภัณฑ์จะได้รับการตั้งโปรแกรมให้ใช้ฟังก์ชันเลื่อนการซูมอัตโนมัติเพื่อให้ลูกค้าได้รับมุมมองที่ดีขึ้นเกี่ยวกับผลิตภัณฑ์ที่เลือก ด้วยการเขียนโปรแกรมนี้หน้าเว็บได้รับการออกแบบมาเพื่อแสดงมุมมองที่กะทัดรัดของกลุ่มผลิตภัณฑ์ทั้งหมดพร้อมกับมุมมองโดยละเอียดของผลิตภัณฑ์ที่สนใจในการออกแบบหน้าเว็บเดียว
แยกวิเคราะห์สองครั้งเป็น int java
โฮเวอร์ทำอะไร?
โฮเวอร์เป็นเครื่องมือการเขียนโปรแกรมอเนกประสงค์ซึ่งผู้ใช้สามารถปรับแต่งองค์ประกอบเป้าหมายด้วยเกณฑ์การจัดรูปแบบที่ไม่มีที่สิ้นสุด บางกรณีของความรู้ในการดำเนินงานของคุณลักษณะโฮเวอร์ ได้แก่ :
- การเปลี่ยนสีพื้นหลัง / ตัวอักษร
- การฝังข้อความที่ซ่อนไว้ที่แสดงบนโฮเวอร์
- สร้างเอฟเฟกต์โรลโอเวอร์บนรูปภาพ
- ซูมข้อความ / รูปภาพอัตโนมัติ
- แก้ไขความทึบของภาพ
- การฝังข้อความ
- สลับรูปภาพ
- Div. โฮเวอร์
- การดำเนินการจัดรูปแบบ CSS โฮเวอร์อื่น ๆ หลายรายการ
เอฟเฟกต์โฮเวอร์โดยทั่วไปจะปรับเปลี่ยนค่าคุณสมบัติขององค์ประกอบเพื่อเปิดใช้งานการเปลี่ยนแปลงข้อความ / รูปภาพที่ระบุหรือองค์ประกอบตามลำดับ การฝังองค์ประกอบโฮเวอร์ CSS ในการออกแบบหน้าเว็บจะเปลี่ยนหน้าเว็บปกติให้เป็นหน้าเว็บแบบโต้ตอบที่มีประสิทธิภาพและใช้งานได้ดี การออกแบบหน้าเว็บเหล่านี้ใช้งานง่ายและครอบคลุม วางเมาส์เหนือหน้าเว็บที่ออกแบบมาให้ดึงดูดผู้บริโภคได้มากขึ้นและดึงดูดผู้มีโอกาสเป็นลูกค้า
ความเข้ากันได้ของ Hover ใน CSS
คุณสมบัติโฮเวอร์เข้ากันได้กับเว็บเบราว์เซอร์หลัก ๆ ทั้งหมด อย่างไรก็ตามการนำองค์ประกอบนี้ไปใช้กับอุปกรณ์ระบบสัมผัสยังคงเป็นงานที่ท้าทาย การวางเมาส์เหนือ CSS ช่วยให้สามารถเข้าถึงเนื้อหาบนอุปกรณ์ที่ไม่รองรับฟังก์ชันการวางเมาส์ได้ มีการสังเกตว่าฟังก์ชันโฮเวอร์ที่เปิดใช้งานบนอุปกรณ์ที่ไม่รองรับอาจติดขัดบนอุปกรณ์ได้
ดังนั้นการแสดงเนื้อหาสำคัญที่สำคัญจึงถูกบล็อกผ่านปัญหาการจัดรูปแบบ ในอีกด้านหนึ่งที่องค์ประกอบของโฮเวอร์ในโปรแกรม CSS มีส่วนช่วยในการปรับเปลี่ยนหน้าเว็บให้เป็นส่วนตัวในระดับที่ยอดเยี่ยมในทางกลับกันความสามารถในการใช้งานบนอุปกรณ์พกพาจะอยู่เฉยๆ การยอมรับในสถานการณ์ที่โลกเทคโนโลยีสารสนเทศกำลังเติบโตขึ้นอย่างมากคุณลักษณะของการวางเมาส์บนอุปกรณ์เคลื่อนที่มีความเสี่ยงที่จะล้าสมัยไปกับความก้าวหน้าทางเทคโนโลยี ดังนั้นความจำเป็นในการสร้างคุณลักษณะฝังตัวแบบพกพาที่ทำงานร่วมกับอุปกรณ์สัมผัสและอุปกรณ์เคลื่อนที่จึงมีความสำคัญอย่างยิ่ง
Hover ทำงานอย่างไรใน CSS
สไตล์หลอกคลาสที่ใช้งานอยู่มีความโดดเด่นในการจัดรูปแบบโฮเวอร์ CSS และจะแทนที่ลิงก์ใด ๆ / ทั้งหมดที่ตามมาซึ่งตามด้วยคลาสหลอกนี้ ตัวอย่างเช่นในคลาสหลอก“: link: เยี่ยมชมหรือ: active กฎ: hover จะต้องวางไว้หลัง: link และ: เยี่ยม แต่ก่อน: active เพื่อความเหมาะสม: hover สไตล์ LVHA-order:: link,: hover,: เยี่ยมแล้วและ: active ถูกใช้เป็นข้อมูลอ้างอิงสำหรับรูปแบบการจัดรูปแบบที่เหมาะสม: hover
div {background-color: green padding: 18px display: none} span: hover + div {display: block}ทดสอบเลื่อน!รหัสที่ซ่อนอยู่จะแสดงเมื่อวางเมาส์เหนือ
ในโค้ดด้านบนองค์ประกอบ span ถูกแก้ไขเพื่อรวมองค์ประกอบโฮเวอร์และ div โดยใช้องค์ประกอบ span: hover + div องค์ประกอบช่วงที่จะแสดงบนหน้า Landing Page หลักจะแสดงข้อความ 'Hover test!' การวางเมาส์บนองค์ประกอบช่วงต่อไปจะแสดงองค์ประกอบ div“ รหัสที่ซ่อนอยู่แสดงเมื่อวางเมาส์เหนือ” รูปแบบการฝังนี้ใช้ได้กับข้อความและรูปภาพ
คำถามสัมภาษณ์ c ++ stl
เลื่อนสีพื้นหลังเปลี่ยนเป็น 'สีแดง'
p: hover, h1: hover, a: hover {background-color: Red}โฮเวอร์สีแดง
โฮเวอร์สีแดง
ลิงค์:
เลื่อนการทดสอบสีแดง:
Google comบันทึก: สวัสดี
โค้ดด้านบนปรับแต่งไฟล์
,