การเปลี่ยนสีโฮเวอร์ของกลุ่มปุ่ม Bootstrap

ฉันใช้กลุ่มปุ่ม Bootstrap เป็นชุดช่องทำเครื่องหมาย

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

ดู http://getbootstrap.com/javascript/#buttons ส่วนช่องทำเครื่องหมายสำหรับตัวอย่างการทำงาน

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


twitter-bootstrap twitter-bootstrap-3
person Giles Roberts    schedule 19.12.2013    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

ที่จริงแล้ว คุณมีความแตกต่างระหว่างปุ่ม :hover และ :active คุณสามารถเห็นเงาเล็กน้อยบนปุ่มได้

คุณสามารถทำให้เงานี้เข้มขึ้นได้โดยใช้โค้ดนี้ (ซึ่งจะใช้ได้กับทุกปุ่ม ไม่ว่าจะเป็นสีใดก็ตาม):

.btn:active,
.btn.active {
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

ผลลัพธ์ :
ป้อนคำอธิบายรูปภาพที่นี่

person zessx    schedule 19.12.2013
comment
ขอบคุณ. จากจุดที่มองเห็น ฉันไม่กระตือรือร้นกับสไตล์เงาของกล่องมากนัก ดังนั้นฉันจึงรวมคำตอบของคุณเข้ากับของฉัน และเปลี่ยนคุณลักษณะสีพื้นหลังและสีเส้นขอบบนปุ่มที่ใช้งานอยู่สำหรับหน้านั้น ๆ - person Giles Roberts; 19.12.2013

arrow_upward
1
arrow_downward

ในการแก้ไข ฉันกำลังแทนที่สีโฮเวอร์บนหน้าที่ฉันใช้กลุ่มปุ่ม เพื่อให้ผู้ใช้สามารถเห็นว่าการโฮเวอร์เป็นกิจกรรมที่แตกต่างไปจากการเลือกปุ่ม

.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  background-color: #428bff;
  border-color: #357ebd;
}
person Giles Roberts    schedule 19.12.2013