อะไรคือความแตกต่างระหว่าง: มุ่งเน้นและ: ใช้งานอยู่?

อะไรคือความแตกต่างระหว่าง:focusและ:activeคลาสหลอก?

:focusและ:activeเป็นสองสถานะที่แตกต่างกัน

• :focus แสดงสถานะเมื่อองค์ประกอบถูกเลือกเพื่อรับอินพุตและ
• :active แสดงสถานะเมื่อองค์ประกอบกำลังถูกเปิดใช้งานโดยผู้ใช้

<button>ตัวอย่างเช่นสมมติว่าเรามี <button>จะไม่ได้มีรัฐใด ๆ จะเริ่มต้นด้วย มันมีอยู่จริง หากเราใช้Tabเพื่อให้ "โฟกัส" กับ<button>มันตอนนี้มันเข้าสู่:focusสถานะของมัน หากคุณคลิก (หรือกดspace) คุณจะทำให้ปุ่มเข้าสู่สถานะ ( :active)

เมื่อทราบว่าเมื่อคุณคลิกที่องค์ประกอบคุณให้มันมุ่งเน้นไปที่ยัง cultivates ภาพลวงตาว่า:focusและ:activeจะเหมือนกัน พวกเขาไม่เหมือนกัน เมื่อคลิกที่ปุ่มอยู่ใน:focus:activeสถานะ

ตัวอย่าง:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

แก้ไข: jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

ที่มา: CSS Pseudo-classes

มีสี่กรณี

1. โดยค่าเริ่มต้นการใช้งานและโฟกัสจะถูกปิด
2. เมื่อคุณแท็บเพื่อวนไปตามองค์ประกอบที่สามารถโฟกัสได้พวกมันจะเข้าสู่:focus(โดยไม่เปิดใช้งาน)
3. เมื่อคุณคลิกบนองค์ประกอบที่ไม่สามารถโฟกัสก็เข้ามา:active(ไม่โฟกัส)
4. เมื่อคุณคลิกที่องค์ประกอบที่สามารถ:active:focusโฟกัสได้มันจะเข้าสู่(เปิดใช้งานและโฟกัสพร้อมกัน)

ตัวอย่าง:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

เมื่อหน้าโหลดทั้งสองในกรณีที่ 1 เมื่อคุณกดแท็บคุณจะมุ่งเน้น div ที่สองและดูมันแสดงกรณีที่ 2 เมื่อคุณคลิกที่ div แรกที่คุณเห็นกรณีที่ 3 เมื่อคุณคลิก div ที่สองคุณจะเห็นกรณีที่ 4 .

ไม่ว่าจะเป็นองค์ประกอบที่สามารถโฟกัสหรือไม่เป็นคำถามอื่น ส่วนใหญ่ไม่ได้เป็นค่าเริ่มต้น แต่ก็ถือว่าปลอดภัย<a>, <input>, <textarea>มีความสามารถโฟกัสโดยค่าเริ่มต้น

: โฟกัสคือเมื่อองค์ประกอบสามารถรับอินพุต - เคอร์เซอร์ในกล่องอินพุตหรือลิงก์ที่ถูกแท็บ

: active คือเมื่อองค์ประกอบถูกเปิดใช้งานโดยผู้ใช้ - เวลาระหว่างที่ผู้ใช้กดปุ่มเมาส์แล้วปล่อย

Active คือเมื่อผู้ใช้เปิดใช้งานจุดนั้น (เช่นการคลิกเมาส์ถ้าเราใช้แท็บจาก field-to-field ไม่มีสัญญาณจาก style ที่ใช้งานอยู่บางทีการคลิกต้องใช้เวลามากขึ้นเพียงแค่ลองคลิกคลิกที่จุดนั้น) จุดถูกเปิดใช้งาน ลองสิ่งนี้:

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

สามารถกำหนดโฟกัสได้จากการป้อนข้อมูลด้วยแป้นพิมพ์เท่านั้น แต่สามารถเปิดใช้งานองค์ประกอบได้ทั้งเมาส์หรือแป้นพิมพ์

หากต้องการใช้: มุ่งเน้นไปที่ลิงก์กฎสไตล์จะใช้เฉพาะกับการกดปุ่มบนแป้นพิมพ์

การใช้ "โฟกัส" จะให้เอฟเฟกต์แบบเดียวกับที่ผู้ใช้เมาส์ได้รับเมื่อวางเมาส์ไว้ จำเป็นต้องใช้ "แอคทีฟ" เพื่อรับเอฟเฟกต์เดียวกันใน Internet Explorer

ความจริงก็คือรัฐเหล่านี้ไม่ทำงานตามที่ควรสำหรับผู้ใช้ทั้งหมด การไม่ใช้ตัวเลือกทั้งสามตัวจะสร้างปัญหาการช่วยสำหรับการเข้าถึงสำหรับผู้ใช้ที่ใช้คีย์บอร์ดเท่านั้นซึ่งไม่สามารถใช้เมาส์ได้ ฉันขอเชิญคุณลองใช้ #nomouse challenge (Nomouse dot org)