使用纯CSS

Question

我有一个div，在这个div里面有一个带背景和文字的图标。

点击这个div我想改变3件事： div背景，图标背景和文本颜色。我怎么能只使用CSS？

<div class="click">
    <div class="icon"></div>
    <div class="text">text</div> 
</div>

.click{
    width: 200px;
    height: 100px;
    background: blue;
}
.icon{
    width: 50px;
    height:50px;
    background: yellow;
    display: inline-block;
}
.text{
    color: #fff;
    display: inline-block;
}

Answer 1

使用纯CSS

保留点击状态

保留点击状态的最佳方式，没有 JavaScript

将您的元素包装在<label>
在您要定位的元素前面放置一个不可见的input checkbox
当输入变为:checked时，使用+*定位任何第一个下一个兄弟元素，并相应地更改样式
对+*的内部元素重复相同的规则：

/* DEFAULT STYLES */
.div{
  width: 200px;
  height: 100px;
  background: blue;
  margin:10px;
}
.icon{
  width: 50px;
  height:50px;
  background: yellow;
  display: inline-block;
}
.text{
  color: #fff;
  display: inline-block;
}

/* HIDE CHECKBOX HELPER */
label.click > input{ /* hide the input checkbox */
  position:absolute;
  visibility:hidden;
}

/* ACTIVE STYLES */
label.click > input:checked +* { /* (the next .div) */
  background: #000;
}
label.click > input:checked +* .icon{
  background: #c0ffee;
}
label.click > input:checked +* .text{
  color: #f00ba4;
}

    <label class="click">
      <input type="checkbox"> <!-- :checked state changes +div styles -->
      <div class="div">
        <div class="icon"></div>
        <div class="text">text</div> 
      </div>
    </label>
    
    <label class="click">
      <input type="checkbox">
      <div class="div">
        <div class="icon"></div>
        <div class="text">text</div> 
      </div>
    </label>

Answer 2

只需在单击时向父项添加一个类，然后为该类编写更具体的CS。

这是一个正在运行的例子。

＆＃13;

document.querySelector(".click").addEventListener("click", function() {
  this.classList.toggle("clicked"); 
});

＆＃13;

.click{
  width: 200px;
  height: 100px;
  background: blue;
}
.icon{
  width: 50px;
  height:50px;
  background: yellow;
  display: inline-block;
}
.text{
  color: #fff;
  display: inline-block;
}
.clicked.click{
  background: green;
}
.clicked .icon{
  background: red;
}
.clicked .text{
  color: blue;
}

＆＃13;

<div class="click">
  <div class="icon"></div>
  <div class="text">text</div> 
</div>

＆＃13;

Answer 3

这是一个只有css的不同解决方案，但你必须点击每个元素：

<div class="click" tabindex="1">
    <div class="icon" tabindex="2"></div>
    <div class="text" tabindex="3">text</div> 
</div>

tabindex

在不使用JS的情况下，:focus和string.toUpperCase(getResources().getConfiguration().locale));有很好的解释。查看impressivewebs

css许多元素的活跃状态

3 个答案:

使用纯CSS