單擊時更改 div 的背景顏色（僅限 CSS）

Question

我有三個 div，其中第一個需要在頁面加載時設置背景顏色（這是為了表明這是默認選擇和預選）

我希望當用戶單擊第二個或第三個 div 時

1. 第一個 div 的背景顏色被移除/白色
2. 單擊的 div 具有背景顏色（灰色）

如果用戶再次單擊第一個 div，它應該表現得像第二個或第三個 div 並采用背景顏色。

我在下面有以下代碼，但是當單擊任何其他 div 時，我無法刪除第一個 div 的背景顏色。

有人可以幫我嗎？

JSFiddle： https://jsfiddle.net/AlphaX/1zp8yehu/1/

 .one {background-color: grey;} [tabindex]:focus { background-color: grey;}

 <div class="parent" tabindex="0"> <div class="one" tabindex="1"> one </div> <div class="two" tabindex="2"> two </div> <div class="three" tabindex="3"> three </div> </div>

Answer 1

:focus-within可以在這里為您提供幫助：

 .active { background-color: grey; }.parent:focus-within * { /* rest all background when one element is focused */ background: none; }.parent [tabindex]:focus { /* set the background of only the focused one */ background-color: grey; }

 <div class="parent" tabindex="0"> <div class="one active" tabindex="1"> one </div> <div class="two" tabindex="2"> two </div> <div class="three" tabindex="3"> three </div> </div>

如果您想讓它們在外部單擊時全部透明，則代碼更棘手：

 .active { position:relative; z-index:0; }.active::before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background: grey; animation:h 0.1s forwards paused; }.parent:focus-within *::before { animation-play-state:running; }.parent [tabindex]:focus { background-color: grey; } @keyframes h { 1%,100% { background:transparent; } }

 <div class="parent" tabindex="0"> <div class="one active" tabindex="1"> one </div> <div class="two" tabindex="2"> two </div> <div class="three" tabindex="3"> three </div> </div>

並使最后點擊的元素保持顏色

 .parent [tabindex] { transition:999s; background: rgba(255,255,255,0); }.parent:focus-within [tabindex] { transition:0s; background: rgba(255,255,254,0); /* a little different coloration to make sure we trigger the transition */ }.parent [tabindex]:focus, .parent [tabindex].active:focus{ background-color: rgb(128,128,128); transition:0s; }.parent.active{ background-color: rgb(128,128,127); /* a little different coloration to make sure we trigger the transition */ }

 <div class="parent" tabindex="0"> <div class="one active" tabindex="1"> one </div> <div class="two" tabindex="2"> two </div> <div class="three" tabindex="3"> three </div> </div>

Answer 2

您可以使用不可見輸入的技巧：

 input[name='_'] { display: none; } label span { display: block; }:checked + span { background-color: grey; }

 <label> <input type="radio" name="_" checked> <span>one</span> </label> <label> <input type="radio" name="_"> <span>two</span> </label> <label> <input type="radio" name="_"> <span>three</span> </label>

即使無線電輸入不可見，它們的標簽仍然可以控制它們。 :checked + span選擇器僅在元素之前有:checked元素時才將樣式應用於元素。

瞧！

Answer 3

 .one, .two. .three {background-color: white;}.one[tabindex]:focus, .two[tabindex]:focus, .three[tabindex]:focus { background-color: grey;}

 <div class="parent" tabindex="0"> <div class="one" tabindex="1"> one </div> <div class="two" tabindex="2"> two </div> <div class="three" tabindex="3"> three </div> </div>