วิธีติดตั้ง Hover ใน CSS ด้วยตัวอย่าง



บทความนี้จะให้ความรู้โดยละเอียดและครอบคลุมเกี่ยวกับวิธีใช้ Hover ใน CSS ด้วยตัวอย่าง

Cascading Style Sheets (CSS) ได้รับการออกแบบโดยใช้ หรือ XML (รวมถึงรูปแบบ XHTML, SVG) เป็นภาษาสไตล์ชีตที่ใช้เพื่ออธิบายองค์ประกอบเป็นหลักผ่านวิธีการจัดรูปแบบที่หลากหลาย วิธีหนึ่งคือการวางเมาส์และในบทความนี้เราจะทำความเข้าใจ Hover ใน CSS ในลักษณะต่อไปนี้:

โฮเวอร์ใน CSS คืออะไร?

CSS hover เป็นส่วนประกอบตัวเลือกที่ใช้เพื่อจัดรูปแบบองค์ประกอบต่างๆเมื่อตัวชี้เมาส์วางเมาส์เหนือองค์ประกอบเหล่านั้น สามารถใช้ได้กับเกือบทุกองค์ประกอบ HTML คุณลักษณะโฮเวอร์ใน CSS มีความสำคัญอย่างมากในการออกแบบหน้าเว็บ





วางเมาส์เหนือ 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

บันทึก: สวัสดี

โค้ดด้านบนปรับแต่งไฟล์

,

และ องค์ประกอบและรวมเข้ากับฟังก์ชันโฮเวอร์ทั่วไป รหัสนี้ได้รับการออกแบบมาเพื่อเปลี่ยนสีข้อความเป็นสีแดงเมื่อตัวชี้เมาส์วางเมาส์เหนือพวกเขา คอมโพเนนต์ h1 และ h2 จะแสดง“ CSS: Hover Test Code” และ“ Hover Red” ตามลำดับ องค์ประกอบย่อหน้า: Hover Test Red และ anchor tag: google.com จะถูกไฮไลต์เป็นสีแดงเมื่อตัวชี้เมาส์วางเมาส์เหนือสิ่งเหล่านี้

การสร้าง Hover Opacity บนรูปภาพ

.pic {width: 1900px height: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacity: 0.2 filter: alpha (opacity = 30)}

โปรแกรม CSS ด้านบนแสดงการปรับเปลี่ยนความทึบของภาพเมื่อวางเมาส์ ความทึบเดิมของภาพคือ หนึ่ง อย่างไรก็ตามการใช้ตัวกรองโฮเวอร์ความทึบได้รับการแก้ไขเป็น 0.2 รหัสนี้แสดงว่าการใช้องค์ประกอบโฮเวอร์สามารถปรับเปลี่ยนความทึบของรูปภาพและ / หรือข้อความได้โดยใช้องค์ประกอบโฮเวอร์

การสร้างข้อความซ้อนทับบนรูปภาพ

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} สีส้มเป็นเส้นใย ผลไม้ที่อุดมสมบูรณ์ สารต่อต้านอนุมูลอิสระที่มีอยู่ในส้มสามารถช่วยในการย่อยอาหารทำให้ผิวเปล่งปลั่งและทำหน้าที่เป็นองค์ประกอบต่อต้านริ้วรอย

การจัดวางข้อความใน CSS โฮเวอร์เป็นเครื่องมือที่มีประสิทธิภาพในการฝังข้อความอธิบายของรูปภาพไว้ในรูปภาพ เครื่องมือนี้ช่วยในการให้ภาพรวมขนาดกะทัดรัดโดยไม่ต้องใช้พื้นที่ว่างในพื้นที่ออกแบบเว็บที่ จำกัด ในรหัสนี้ภาพพื้นหลังจะถูกฝังด้วยข้อความอธิบายซึ่งจะแสดงเมื่อตัวชี้เมาส์วางเมาส์เหนือข้อความ



นี่เป็นการสรุปประเด็นสำคัญทั้งหมดของการวางเมาส์ใน CSS และเน้นถึงความสามารถในการใช้งานในการพัฒนาเว็บ มีเอฟเฟกต์พิเศษมากมายที่สามารถนำมาสู่หน้าเว็บของเราได้ เราสามารถลองใช้ตัวเลือกโฮเวอร์ผสมกับคุณสมบัติ CSS อื่น ๆ ได้ตลอดเวลาเช่นภาพเคลื่อนไหวภาพพื้นหลังไฮเปอร์ลิงก์ ฯลฯ และสำรวจศักยภาพของมันตามที่เราเห็นในตัวอย่างบางส่วนของเรา สุดท้าย CSS เป็นหนึ่งในวิธีที่ทรงพลังที่สุดในการออกแบบและแปลงหน้าเว็บและด้วยเหตุนี้นักพัฒนาเว็บจึงจำเป็นต้องได้รับทักษะนี้เพื่อสร้างหน้าเว็บแบบไดนามิก

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก“ Hover in CSS” แล้วเราจะติดต่อกลับไป