สถานะของลิงก์ใน CSS

ฉันคิดว่าคุณเมื่อเข้าเยี่ยมชมเว็บไซต์ต่าง ๆ บนอินเทอร์เน็ตคงสังเกตเห็นว่า ลิงก์มักจะตอบสนองเมื่อเลื่อนเมาส์ไปวาง บนพวกมัน คุณสามารถสร้างเอฟเฟกต์ดังกล่าวได้โดยการกำหนด พฤติกรรมของลิงก์ในสถานะต่าง ๆ

ตัวอย่างเช่น นี่คือวิธี - a:hover - เรา จะจับสถานะเมื่อเมาส์ hover อยู่บนลิงก์ ในขณะนี้เราสามารถ ตัวอย่างเช่น เปลี่ยนสีของลิงก์หรือเอา/เพิ่ม ขีดเส้นใต้ให้กับมัน โครงสร้าง :hover ถูกเรียกว่า pseudo-class Pseudo-classes ช่วยให้สามารถจับสถานะต่าง ๆ ขององค์ประกอบได้

นอกจาก :hover แล้วยังมี pseudo-classes :link ซึ่งจับลิงก์ที่ยังไม่ได้เยี่ยมชม และ :visited ซึ่งจับลิงก์ ที่ได้เยี่ยมชมแล้ว ในบางเว็บไซต์ ด้วยความช่วยเหลือของพวกมัน มันจะแสดงให้ผู้ใช้เห็นว่าที่ไหน ที่พวกเขาเคยไปแล้ว และที่ไหน - ยัง ไม่เพียงเท่านั้นยังมี pseudo-class :active ซึ่งจับสถานะต่อไปนี้ : มีการคลิกเมาส์บนองค์ประกอบ แต่ ยังไม่ได้ปล่อยเมาส์

ในตัวอย่างต่อไปนี้สำหรับลิงก์ในสถานะ :hover จะเอาการขีดเส้นใต้ออก ใน สถานะ :link กำหนดให้เป็นสีแดง ในสถานะ :visited - สีเขียว ใน :active - สีฟ้า ผลลัพธ์ที่ได้คือ ในตอนแรกลิงก์จะเป็นสีแดง หลังจากคลิกที่มัน - เป็นสีเขียว หากคลิก ที่มันด้วยเมาส์และไม่ปล่อย - เป็นสีฟ้า และหากเลื่อนเมาส์ไปวางบนมัน - จะกลายเป็น แบบไม่ขีดเส้นใต้:

cssa:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: blue;
}

html<a href="#">link</a>

Результат: