1 回答

TA貢獻2065條經(jīng)驗 獲得超14個贊
首先,您不需要編寫自己的 JavaScript 來切換.active
按鈕上的類。Bootstrap 有您可以使用的按鈕插件:
<button?type="button"?class="btn?btn-outline-secondary?w-100"? ????????data-toggle="button"?aria-pressed="false">1</button>
.active
當選擇/取消選擇按鈕時,這會自動切換類。
jsfiddle演示:?https://jsfiddle.net/davidliang2008/mfqyp8j3/6/
其次,當您選擇一個按鈕時,會發(fā)生兩件事。Bootstrap 添加.active
(如果您使用按鈕插件)和.focus
類:
.active
:為您提供與懸停按鈕時相同的背景背景.focus
:在按鈕周圍添加陰影
當您單擊其他位置時,只會.focus
刪除類。這就是為什么您應該看到按鈕充滿了背景顏色,沒有陰影,就像您將鼠標懸停在按鈕上一樣。
當您取消選擇一個按鈕但鼠標仍然指向它時,.active
類將被刪除,但懸停效果仍然.focus
繼續(xù),使按鈕看起來就像您沒有取消選擇它一樣。
一旦鼠標移開,懸停效果就會消失,只剩.focus
下懸停效果。這就是為什么您應該看到按鈕只有陰影。
如果你想進一步區(qū)分按鈕的選擇和取消選擇狀態(tài),你可以編寫CSS來禁用懸停效果,如果按鈕是但.focus
不是.active
:
.selector .btn.focus:not(.active):hover {
? ? color: inherit;
? ? background-color: inherit;
? ? border-color: inherit;
}
jsfiddle演示:?https://jsfiddle.net/davidliang2008/mfqyp8j3/17/
Codepen演示:?https://codepen.io/davidliang2008/full/yLJRZYy
添加回答
舉報