我嘗試優(yōu)化我的日歷小部件。我想用單獨(dú)的顏色填充 之間的所有元素selected_first（button:hover參見(jiàn)代碼示例）：body { background: #000;}div { counter-reset: btn; display: flex; flex-flow: row wrap; max-width: 200px;}button { flex: 0 0 20%; display: block; height: 30px; border: 0; background-color: #333; color: #fff; border: 1px solid #000;;}button:before { counter-increment: btn; content: counter(btn);}button[value="selected_first"] { background: green !important;}button[value="selected_first"] ~ button, button:hover { background: blue;}button[value="selected_first"] ~ button:hover ~ button { background: #333; }<div> <button></button> <button></button> <button value="selected_first"></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button></div>當(dāng)鼠標(biāo)懸停在按鈕上時(shí)它對(duì)我有用。但當(dāng)沒(méi)有任何按鈕懸停時(shí)，它不起作用。它應(yīng)該看起來(lái)像這樣： 預(yù)期結(jié)果但當(dāng)沒(méi)有任何按鈕懸停時(shí)，它們?nèi)匀痪哂兴{(lán)色背景。
1 回答
MM們
TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
考慮懸停在父元素上
body {
background: #000;
}
div {
counter-reset: btn;
display: flex;
flex-flow: row wrap;
max-width: 200px;
}
button {
flex: 0 0 20%;
display: block;
height: 30px;
border: 0;
background-color: #333;
color: #fff;
border: 1px solid #000;;
}
button:before {
counter-increment: btn;
content: counter(btn);
}
button[value="selected_first"] {
background: green !important;
}
div:hover button[value="selected_first"] ~ button,
div:hover button:hover {
background: blue;
}
div:hover button:hover ~ button {
background: #333;
}
<div>
<button></button>
<button></button>
<button value="selected_first"></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
- 1 回答
- 0 關(guān)注
- 153 瀏覽
添加回答
舉報(bào)
0/150
提交
取消