วิธีเน้นลูกศร

สารบัญ:

วิธีเน้นลูกศร
วิธีเน้นลูกศร

วีดีโอ: วิธีเน้นลูกศร

วีดีโอ: วิธีเน้นลูกศร
วีดีโอ: การทำ Highlight Mouse Pointer ง่ายนิดเดียว 2024, มีนาคม
Anonim

โดยทั่วไป ลูกศรแบบกราฟิกบนเว็บไซต์ใช้เพื่อจัดระเบียบการนำทาง เมื่อคุณคลิกตัวชี้ดังกล่าว คุณจะไปยังหน้าอื่นหรือส่วนอื่นของหน้าปัจจุบัน บางครั้งการกระทำบางอย่างก็เชื่อมโยงกับการกระทำเหล่านั้น เช่น การเน้นเนื้อหาของช่องแท็ก การเรียกใช้สคริปต์ JavaScript ฯลฯ เพื่อเน้นว่าลูกศรนี้เป็นองค์ประกอบที่ใช้งานอยู่ ให้ใช้เอฟเฟกต์ "ไฮไลต์" เช่น การเปลี่ยนแปลงลักษณะที่ปรากฏเมื่อวางเมาส์

วิธีเน้นลูกศร
วิธีเน้นลูกศร

จำเป็น

ความรู้พื้นฐานของภาษา HTML และ CSS CSS

คำแนะนำ

ขั้นตอนที่ 1

กำหนดกลไกในการปรับใช้การเน้นลูกศรที่เหมาะสมที่สุดสำหรับคุณ มีหลายแบบ สองแบบง่ายๆ ให้ไว้ในขั้นตอนต่อๆ ไปของคำแนะนำนี้ พวกเขาทั้งคู่ใช้ CSS hover pseudo-class เมื่อเคอร์เซอร์ของเมาส์อยู่เหนือองค์ประกอบกราฟิก (ลูกศร) ระบบจะใช้รูปแบบที่อธิบายไว้ในคลาสหลอกนี้ และเวลาที่เหลือของสไตล์นี้จะไม่ทำงาน สำหรับทั้งสองตัวเลือกที่อธิบายไว้ด้านล่าง คุณสามารถใช้ HTML เดียวกันได้ รหัส แต่คำอธิบายรูปแบบที่แตกต่างกัน รหัสลูกศรในแหล่งที่มาของหน้าสามารถเขียนได้ดังนี้: แอตทริบิวต์ id ระบุตัวระบุลิงก์ (arrowA) โดยที่เบราว์เซอร์จะกำหนดว่าควรใช้คำอธิบายลักษณะใด

ขั้นตอนที่ 2

ตัวเลือกแรกคุณจะต้องเตรียมภาพลูกศรสองภาพ - มีและไม่มีแสงพื้นหลัง บันทึกลงในไฟล์ที่มีชื่อเช่น arrON.

a # arrowA, # arrowA: เข้าชมแล้ว {

แสดง: บล็อก;

ความสูง: 30px;

ความกว้าง: 100px;

พื้นหลัง: url (arrOFF.gif) ไม่ซ้ำ;

เส้นขอบ: 0;

}

a # arrowA: โฮเวอร์ {

พื้นหลัง: url (arrON.gif) ไม่ซ้ำ;

เส้นขอบ: 0;

}

บล็อกแรกมีขนาดของลูกศร (ความสูง: 30px; ความกว้าง: 100px;) - แทนที่ด้วยขนาดของรูปภาพลูกศรที่เตรียมไว้

ขั้นตอนที่ 3

ตัวเลือกที่สองช่วยให้คุณใช้ไฟล์รูปภาพได้เพียงไฟล์เดียว คุณต้องวางรูปภาพของลูกศรทั้งสองไว้ - ทั้งที่เน้นและไม่ใช้งาน คุณสามารถวางเคียงข้างกันคุณสามารถวางเหนืออีกข้างหนึ่งได้ ในโค้ดตัวอย่าง เราจะถือว่าลูกศรที่ไฮไลต์อยู่ใต้ลูกศรที่ไม่ใช้งาน และคุณตั้งชื่อไฟล์ว่า arr.

a # arrowA, # arrowA: เข้าชมแล้ว {

แสดง: บล็อก;

ความกว้าง: 100px;

ความสูง: 30px;

พื้นหลัง: url (arr.gif) ไม่ซ้ำ;

เส้นขอบ: 0;

}

a # arrowA: โฮเวอร์ {

พื้นหลัง: url (arr.gif) ไม่ซ้ำ 31px;

เส้นขอบ: 0;

}

อย่าลืมปรับขนาดที่นี่ด้วย