html - 仅在 CSS 中通过单击切换更改图标的颜色

Question

我正在使用此代码。我也想当它是display: block标签的颜色发生变化时。

label.divcheck { color:blue; text-decoration:underline; }
input.divcheck { display:none; }

input.divcheck + div { display:none; }
input.divcheck:checked + div { display:block;}

<label class="divcheck" for="navigation">Button Nav</label>
<label class="divcheck" for="other">Button Other</label>

<input type="checkbox" class="divcheck" id="navigation"/>
<div class="navigation">
Foo
</div>

<input type="checkbox" class="divcheck" id="other"/>
<div class="navigation">
Other
</div>

https://stackoverflow.com/a/35781115/15949286

标签： htmlcss

Answer 1

不使用 JavaScript 的唯一方法是解析标签元素并将它们定位在输入之后。示例如下。

label.divcheck {
  color: blue;
  text-decoration: underline;
}

input.divcheck {
  display: none;
}

input.divcheck~div {
  display: none;
}

input.divcheck:checked~div {
  display: block;
}

input.divcheck:checked~label.divcheck {
  color: red;
}

section {
  display: flex;
}

<section>
  <div>
    <input type="checkbox" class="divcheck" id="other" />
    <label class="divcheck" for="other">Button Other</label>
    <div class="navigation">
      Foo
    </div>
  </div>

  <div>
    <input type="checkbox" class="divcheck" id="navigation" />
    <label class="divcheck" for="navigation">Button Nav</label>
    <div class="navigation">
      Other
    </div>
  </div>
</section>