僅使用 css 在單擊時更改 div 背景顏色

Question

所以我有一個 div 我想改變點擊時的顏色。 我總共有三個 div，我想在點擊它時指出哪一個是活動 div

基本上我想使用 CSS active 屬性，但在鼠標抬起時不讓特定的 div 變回。 有點像一個焦點。 如果有幫助，我也在使用引導程序

這是一個 html 的例子

<div>
    Section 1
</div>
<div>
    Section 2
</div>
<div>
    Section 3
</div>

誰能告訴我如何在不使用 javascript 的情況下完成此任務？

Answer 1

通過添加 tabIndex 使您的 DIV 成為焦點：

<div tabindex="1">
Section 1
</div>

<div tabindex="2">
Section 2
</div>

<div tabindex="3">
Section 3
</div>

然后你可以簡單地使用:focus偽類

div:focus {
    background-color:red;
}

演示： http : //jsfiddle.net/mwbbcyja/

Answer 2

試試這個，它對我有用：

div:active{  

    background-color:white;

}

Answer 3

:active是一個很好的解決方案，無論是在移動設備中還是在 PC 中點擊。 您可以使用:active來觀察觸摸並使用::before作為遮罩層。 請記住在::before或::before上刪除指針事件將攔截您對div的點擊

div{
  position: relative;
}
div:active::before{
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: 5;
  background: rgba($color: #000000, $alpha: 0.12);
}
div::before{
  pointer-events: none;
}

Answer 4

div:focus {
    background-color:'color';
}

Answer 5

嘗試使用此功能

div .active {
    background-color:blue;
    }