ตัวเลือกเมาส์ลงใน CSS คืออะไร?

114

ฉันสังเกตเห็นว่าปุ่มและองค์ประกอบอื่น ๆ มีสไตล์เริ่มต้นและทำงานใน 3 ขั้นตอน ได้แก่ มุมมองปกติมุมมองโฮเวอร์ / โฟกัสและมุมมองแบบเลื่อนลง / คลิกใน CSS ฉันสามารถเปลี่ยนรูปแบบของมุมมองปกติและมุมมองโฮเวอร์ได้ดังนี้:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

แต่ฉันจะเลือกมูสดาวน์ได้อย่างไร? ฉันต้องการสิ่งนี้:

button:mousedown{
  //some styling
}

ขอบคุณ

html css css-selectors

— มัลติมีเดีย xp
แหล่งที่มา

1

ดูเหมือนว่าจะซ้ำกันของstackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier

@ x4vier: ฉันไม่คิดอย่างนั้น จากนั้นอีกครั้งก็ยากที่จะบอกว่า "วางเมาส์" ในกรณีนี้หมายถึงอะไร

— BoltClock

160

ฉันคิดว่าคุณหมายถึงสถานะที่ใช้งานอยู่

 button:active{
  //some styling
 }

นี่คือสถานะหลอกที่เป็นไปได้ทั้งหมดที่ลิงก์สามารถมีได้ใน CSS:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

ดูเพิ่มเติมที่: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— 86.
แหล่งที่มา

2

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

— Multimediaxp

ในกรณีนี้ฉันจะจัดรูปแบบปุ่มให้เต็มที่มากขึ้น โดยเพิ่มเส้นขอบ: 0; คุณสูญเสียกรอบรอบปุ่มและปัญหาที่คุณพบ

— jansmolders86

@ jansmolders86 คุณรู้หรือไม่ว่ามี mouseover, mouseleave, mousedown, mouseup selector สำหรับรูปภาพหรือปุ่มใน css หรือไม่?

— Ng2-Fun

@ J.Fun ไม่ได้จริงๆคุณสามารถลองใช้เอฟเฟกต์ที่ต้องการได้โดยใช้: hover state สำหรับ over / leave และ: active สำหรับการลง / ขึ้น แต่คุณไม่สามารถแยกความแตกต่างระหว่างทั้งสองโดยไม่ใช้จาวาสคริปต์

— jansmolders86

50

ฉันพบว่าสิ่งนี้ทำงานเหมือนเหตุการณ์ที่มีการลงโฆษณา:

button:active:hover {}

— Shawn98ag
แหล่งที่มา

33

หมายเหตุ Pro-tip:ด้วยเหตุผลบางประการไวยากรณ์ CSS จำเป็นต้องใช้:activeข้อมูลโค้ดต่อจาก:hoverสำหรับองค์ประกอบเดียวกันเพื่อให้มีประสิทธิภาพ

http://www.w3schools.com/cssref/sel_active.asp

— woohooGuy
แหล่งที่มา

2

CSS ได้รับการประเมินตามลำดับดังนั้นจึงสมเหตุสมผล องค์ประกอบที่ไม่สามารถเป็นก่อนที่มันจะเป็น:active :hover

— InTheZone

2

นอกจากนี้ยัง:activeต้องมีการใช้งานหลังจาก:focusนั้น ขอขอบคุณที่ชี้ให้เห็นสิ่งนี้ฉันเกาหัวจริงๆว่าทำไม CSS ของฉันถึงไม่มีผล!

— Michael

1

@InTheZone แน่นอนมันสามารถกลายเป็น: ใช้งานก่อนที่จะ: hover'ed คุณสามารถเปิดใช้งานได้โดยใช้แป้นพิมพ์ซึ่งไม่ได้วางเมาส์เหนือ

— ANeves

2

ฉันเพิ่งพบว่า:active:focusทำสิ่งเดียวกันใน css ราวกับ:active:hoverว่าคุณต้องการแทนที่ไลบรารี css ที่กำหนดเองพวกเขาอาจใช้ทั้งสองอย่าง

— มี
แหล่งที่มา