1 回答

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