单击时更改 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>