คลิกเหตุการณ์ใน CSS ล้วนๆ โดยไม่มี:target เป้าหมายใน CSS มันทำงานอย่างไร? แล้วความหมายและการเข้าถึงล่ะ
มีวิธีจัดการเหตุการณ์การคลิกใน CSS โดยไม่ต้องใช้หรือไม่ โดยใช้จาวาสคริปต์. คุณสามารถใช้วิธีการกับ :เป้า. แต่ถ้าใช้ไม่ได้ล่ะ? มีอีกวิธีหนึ่ง
ชมการสาธิต มันถูกสร้างขึ้นอย่างสมบูรณ์ใน CSS ไม่ใช่บรรทัดของโค้ด JavaScript ขึ้นอยู่กับการใช้งานเดิมของตัวเลือก:active และ:hover
คำอธิบาย
ก่อนอื่นคุณต้องสร้างคอนเทนเนอร์ที่จะมีปุ่มและบล็อกที่จะแสดงเมื่อกดเมาส์ โครงสร้างมาร์กอัปจะเป็นดังนี้:
เราจำเป็นต้องทำให้ .content มองไม่เห็นจนกว่าจะกดปุ่มเมาส์บน .wrapper ในการแก้ปัญหา ให้ตั้งค่าคุณสมบัติ .content แสดง: none จากนั้น เมื่อกดปุ่มเมาส์บน .wrapper เราจะรวมคุณสมบัติ display: block สำหรับ .content เข้าไปด้วย เหตุใดจึงต้องตั้งค่าคุณสมบัติ .wrapper:active .content display: block ในสถานะนี้ .content จะปรากฏเฉพาะเมื่อกดปุ่มเมาส์เท่านั้น หากคุณปล่อย .content จะหายไปอีกครั้ง ในการแก้ไขปัญหานี้ ตรวจสอบให้แน่ใจว่าเมื่อเคอร์เซอร์เมาส์อยู่เหนือ .content องค์ประกอบจะได้รับการกำหนดคุณสมบัติ display: block นั่นคือเราตั้งค่าคุณสมบัติ display: block สำหรับ .content:hover โค้ด CSS จะมีลักษณะดังนี้:
เนื้อหา ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
สิ่งที่เหลืออยู่คือการ "หวีมัน" รูปร่างและทำให้ชัดเจนยิ่งขึ้น:
Wrapper ( ตำแหน่ง: สัมพันธ์; ) .button ( พื้นหลัง: สีเหลือง; ความสูง: 20px; ความกว้าง: 150px; ) .content ( ตำแหน่ง: สัมบูรณ์; padding-top: 20px; ) .content li ( พื้นหลัง: สีแดง; )
ข้อความปุ่มในโค้ดด้านบนจะมีพื้นหลังสีเหลือง และข้อมูลที่แสดงเมื่อกดปุ่มเมาส์จะมีพื้นหลังสีแดง
คุณสามารถค้นหาบทเรียนมากมายบนอินเทอร์เน็ตได้อย่างง่ายดายโดยใช้ pseudo-class:target อย่างไรก็ตามอย่าทำตามโค้ดของคนอื่นแต่พยายามทำความเข้าใจและเข้าใจว่ามันทำงานอย่างไร? แน่นอนว่าเราทำไม่ได้หากไม่มีตัวอย่าง
คืออะไร:เป้าหมาย?
ใน CSS:target นี่คือคลาสหลอกที่ช่วยให้คุณสามารถเลือก "ส่วน" ทั้งหมดของเอกสาร HTML ของคุณซึ่งจะดำเนินการบางอย่าง นี่อาจเป็นย่อหน้าของข้อความหรือส่วนหัว เป็นต้น
ไม่ควรสับสนคลาสหลอกกับองค์ประกอบหลอก ซึ่งสามารถเลือกได้เพียงบางส่วนขององค์ประกอบ เช่น ตัวอักษรตัวแรกหรือบรรทัดแรกของย่อหน้า
คลาสหลอก:
- a:link(สี:#111)
- a:โฮเวอร์(สี:#222)
- div:ลูกคนแรก(color:#333)
องค์ประกอบหลอก:
- p::อักษรตัวแรก(สี:#444)
- p::บรรทัดแรก(สี:#555)
ฉันคิดว่ามันชัดเจนจากไวยากรณ์ว่าสิ่งนี้หรือคลาสหลอกหรือองค์ประกอบหลอกทำอะไร คลาสหลอกที่ได้รับความนิยมมากที่สุดคือ :hover ซึ่งเว็บมาสเตอร์ทุกคนจะเจอคลาสนี้ โดยจะอธิบายสไตล์ขององค์ประกอบเมื่อโฮเวอร์ target ทำงานในลักษณะเดียวกันและอธิบายสไตล์ขององค์ประกอบเมื่อเกิดสถานการณ์บางอย่าง
รหัสแฟรกเมนต์
กล่าวโดยสรุป นี่คือสิ่งที่คลาสเทียมของเราเชื่อมโยงกับคลาสหลอก นี่คือแฮชแท็กที่มีคำหรือวลีวางไว้ท้ายที่อยู่ ดูเหมือนว่านี้:
เทคนิคนี้สามารถใช้สำหรับการเปลี่ยนผ่านภายในบทความได้ ตัวอย่างเช่น ในตอนต้นของบทความ คุณสร้างสารบัญเล็กๆ เมื่อคลิกที่องค์ประกอบที่บุคคลนั้นถูกพาไปยังส่วนที่ลิงก์นำไปสู่ ส่วนนั้นจะต้องเพิ่มตัวระบุ
สิ่งนี้ใช้ได้กับ HTML บริสุทธิ์ไม่จำเป็นต้องมีลูกเล่น ตัวระบุขนาดเล็ก
การจัดการการคลิกโดยใช้: เป้าหมาย
ตอนนี้เรามาลองตรวจสอบให้แน่ใจว่าเมื่อคุณคลิกที่ส่วนที่ต้องการจากเมนูชั่วคราวของเรา สไตล์ชื่อเรื่องจะเปลี่ยนไป โดยแสดงว่าย่อหน้าใดที่ใช้งานอยู่ในปัจจุบัน
H1 ( แบบอักษร: 30px Arial sans-serif; ) h1:target ( ขนาดตัวอักษร: 50px; การตกแต่งข้อความ: ขีดเส้นใต้; สี: #37aee4; )
โค้ดนั้นง่ายมาก - เมื่อคลิก ชื่อเรื่องจะเปลี่ยนขนาด สี และขีดเส้นใต้ คุณสามารถเพิ่มชีวิต (Ruslan, hi) และสร้างแอนิเมชั่นเพื่อเปลี่ยนสีชื่อเรื่อง:
H1 ( แบบอักษร: 30px Arial sans-serif; -webkit-transition: color 0.5s ง่าย; -moz-transition: color 0.5s ง่าย; -o-transition: สี 0.5s ง่าย; -ms-transition: สี 0.5s ง่าย; การเปลี่ยนแปลง: สี 0.5s ง่าย; )
การเน้นชื่อที่ใช้งานอยู่เป็นสิ่งที่ดี แต่ถ้าคุณต้องการเปลี่ยนการออกแบบข้อความที่ตามมาล่ะ CSS ให้โอกาสนี้แก่เรา ดูเหมือนว่านี้:
H1:เป้าหมาย + p ( พื้นหลัง: #eaeaea; การขยาย: 10px; )
ในกรณีนี้ เครื่องหมายบวกหมายความว่าควรใช้สไตล์กับย่อหน้าที่อยู่ถัดจากหัวข้อ ดังนั้น, เมื่อส่วนหัวที่ใช้งานอยู่เปลี่ยนแปลง เราก็เปลี่ยนการออกแบบส่วนด้วยโดยมีข้อความว่า “เป็น” ของเขา
รองรับเบราว์เซอร์
คลาสหลอกเป้าหมายเป็นของ CSS รุ่นที่สามและได้รับการสนับสนุนอย่างสมบูรณ์โดยเบราว์เซอร์ทั้งหมดยกเว้น IE ที่เก่ากว่าเวอร์ชัน 9 ดังนั้นคุณไม่ควรใช้หากผู้ชมของคุณใช้เบราว์เซอร์นี้ แม้ว่าจะมีทางออกอยู่ แต่นี่คือ Selectvizr ซึ่งเป็นไลบรารี JS ที่คุณสามารถทำให้ IE ทำงานกับ CSS3 ได้ เราเพียงแค่เพิ่มสคริปต์ และมันก็ใช้งานได้
สิ่งเดียวคือ ถ้าคุณไม่ได้ใช้ JQuery หรือ MooTools คุณจะต้องเชื่อมต่อมันเพื่อให้สคริปต์นี้ทำงานได้ เว็บไซต์อย่างเป็นทางการมีตารางแสดงว่าห้องสมุดใดรองรับอะไรบ้าง หากสนใจก็อ่านได้เลย นี้ .
บทสรุป
การใช้คลาสหลอกอาจดูซับซ้อน แต่เมื่อคุณเข้าใจวิธีการทำงานแล้ว คุณสามารถทำสิ่งที่น่าทึ่งได้โดยใช้เพียง CSS และไม่มีอะไรอื่นอีก คลาสหลอก: เป้าหมาย- ยืนยันเรื่องนี้ได้อย่างดีเยี่ยม ด้วยความช่วยเหลือคุณสามารถเปลี่ยนการโต้ตอบของเพจกับผู้เยี่ยมชมได้อย่างรุนแรง ตัวอย่างข้างต้นเป็นวิธีที่ง่ายที่สุด แต่ก็ยังเพิ่มการโต้ตอบเล็กน้อยให้กับเพจ แต่นี่เป็นเพียงโค้ดสองสามบรรทัด
อย่าหักโหมจนเกินไปด้วยการสนับสนุนด้านความงามและเบราว์เซอร์ แล้วทุกอย่างจะเรียบร้อยดี
ขอให้เป็นวันที่ดี
target="_blank ใช้เพื่อสร้างแท็ก เปิดลิงก์ในหน้าต่างใหม่ แต่ HTML เป้าหมายคืออะไร? ทำไมจึงต้องเว้นว่าง? และสิ่งที่น่าสนใจที่สุดคือ ทำไมจึงต้องมีขีดล่างที่จุดเริ่มต้น? มาดูโค้ดนี้ให้ละเอียดยิ่งขึ้นและทำความเข้าใจว่ามันทำอะไร
คุณลักษณะเป้าหมาย
ค่าเป้าหมาย
ค่าทั่วไปสี่ค่าสำหรับแอตทริบิวต์เป้าหมายคือ:
_ตัวเอง
สถานการณ์เดียวที่สามารถเกิดขึ้นได้คือหากมีการใช้แท็กใน HTML
_ว่างเปล่า
เปิดลิงก์ในแท็บหรือหน้าต่างใหม่ สิ่งนี้ถูกกำหนดโดยการตั้งค่าท้องถิ่นของผู้ใช้ ในเบราว์เซอร์ส่วนใหญ่ นี่คือหน้าแท็บใหม่ คุณอาจคิดว่าการใช้ค่านี้ทำให้คุณสามารถใช้หน่วยโฆษณาป๊อปอัปได้ แต่นั่นไม่เป็นความจริง ส่วนใหญ่แล้ว JavaScript ใช้สำหรับสิ่งนี้มากกว่า HTML
ค่าแอตทริบิวต์ HTML เป้าหมายนี้เหมาะที่สุดในการเปิดลิงก์ไปยังไซต์ภายนอกหรือไฟล์ PDF ในแท็บใหม่ ด้วยเหตุนี้ หลังจากปิดแท็บเหล่านี้ ผู้ใช้จึงกลับไปยังไซต์ของคุณ แต่สิ่งนี้ไม่ควรถูกนำไปใช้ในทางที่ผิด เนื่องจากผู้ใช้จะนำทางได้ยากหากแต่ละลิงก์เปิดในแท็บใหม่
_พ่อแม่
ค่า _parent จะเปิดลิงก์ในเฟรมหลักสำหรับเฟรมที่คุณอยู่ นี่ไม่ใช่ค่านิยมเนื่องจากแท็กสำหรับสร้างเฟรม