โฮเวอร์และแอ็คทีฟเฉพาะเมื่อไม่ได้ปิดใช้งาน

187

ฉันใช้โฮเวอร์ , แอคทีฟและปิดการใช้งานกับปุ่มสไตล์

แต่ปัญหาคือเมื่อปุ่มถูกปิดใช้งานโฮเวอร์และสไตล์ที่ใช้งานยังคงมีผลอยู่

วิธีใช้โฮเวอร์และแอ็คทีฟบนปุ่มที่เปิดใช้งานเท่านั้น

css

329

คุณสามารถใช้: เปิดใช้งานคลาสหลอก แต่การแจ้งเตือนIE<9ไม่รองรับ :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— วิศวกร
แหล่งที่มา

3

นอกจากนี้ยังมี:not()ตัวเลือก แต่หลังจากนั้นอีกครั้งรองรับเฉพาะตั้งแต่ IE9 เช่นกัน ดู: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledดูเหมือนจะไม่ทำงานในกรณีของฉัน ใช้การจำลอง IE9 ภายใต้ IE11

— Neolisk

76

.button:active:hover:not([disabled]) {
    /*your styles*/
}

คุณสามารถลองสิ่งนี้ ..

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

นี่เป็นวิธีแก้ปัญหาที่ดีสำหรับเมื่อคุณต้องการให้สถานะ "hover disabled" ดูคล้ายกับสถานะ "non-hovered disabled"

— Mikhael Loo

ฉัน <3 โซลูชันนี้ อนุญาตให้ฉันมีสิ่งต่อไปนี้: <button class = "button"> hovers </button> และ <button class = "ปุ่ม no-hover> ไม่เลื่อน </button> โดยใช้เพียง: not (.no-hover)

— Ben

35

ทำไมไม่ใช้แอตทริบิวต์ "disabled" ใน css ต้องใช้กับเบราว์เซอร์ทั้งหมด

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

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

13

ครอบคลุมสถานะผู้พิการทั้งหมดโดยเลือกทั้งหมดในบรรทัดเดียว:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

วิธีที่มีความเฉพาะเจาะจงต่ำกว่าซึ่งใช้งานได้ในเบราว์เซอร์รุ่นใหม่ (IE11 + และไม่รวมเบราว์เซอร์ Opera & IE บนมือถือ - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

pointer-events: noneกฎจะปิดการเลื่อน; คุณไม่จำเป็นต้องเพิ่มความเฉพาะเจาะจงด้วย.btn[disabled]:hoverตัวเลือกเพื่อลบล้างลักษณะการโฮเวอร์

(FYI นี่คือเหตุการณ์ HTML ตัวชี้แบบง่ายไม่ใช่ตัวชี้สรุปการป้อนข้อมูลอุปกรณ์ที่เป็นข้อโต้แย้ง)

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

12

ใน sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

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

10

หากคุณกำลังใช้LESSหรือSassคุณสามารถลองนี้:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

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

นี่เป็นทางออกที่ดีใน SASS เนื่องจากเอฟเฟกต์โฮเวอร์จะได้รับการประมวลผลสำหรับปุ่มที่ปิดใช้งานเว้นแต่คุณจะใส่ไว้ในไม่ใช่บล็อก

— mbokil

2

วิธีหนึ่งคือการเพิ่มคลาสของอนุภาคในขณะที่ปิดใช้งานปุ่มและการแทนที่โฮเวอร์และสถานะแอ็คทีฟสำหรับคลาสนั้นใน css หรือลบคลาสเมื่อปิดใช้งานและระบุคุณสมบัติการโฮเวอร์และการใช้งานหลอกในคลาสนั้นใน css เท่านั้น ไม่ว่าจะด้วยวิธีใดก็ตามอาจไม่สามารถทำได้อย่างหมดจดด้วย css คุณจะต้องใช้ js เล็กน้อย

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