Question

所以我有一个div我想改变点击时的颜色。我有三个div，我想在点击它时表示哪一个是活动div

基本上我想使用CSS活动属性，但是当鼠标向上发生时没有特定的div更改。有点像焦点。如果有用的话，我也在使用bootstrap

以下是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;
    }

单击仅使用css更改div背景颜色

5 个答案: