时间戳

首页 > 解决方案 > 为什么更改背景颜色会阻止此 CSS 切换按钮正常工作

html - 为什么更改背景颜色会阻止此 CSS 切换按钮正常工作

问题描述

尝试修改此 css 单选按钮：link

如果我更改正文的背景，它可以正常工作，但如果我将代码包装在 a 中div并更改div过渡的背景，则停止工作。解释是什么？我认为它与背景过渡有关，.btn但是当我玩它时，我无法让它工作。我将如何解决这个问题，以便它适用于任何背景？

这是HTML

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Yes</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">No</label>

和 CSS（从链接更改为常规 CSS）

body, html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #1a1a1a;
}
input[type="radio"].toggle + label:after {
  background: #1a1a1a;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}

标签： htmlcss

解决方案

这是因为z-index: -1设置 onbody和html。如果您将切换按钮包装在一个div元素中，并将该div元素的z-index值设置为低于bodyand html，那么您将能够实现您所追求的。像这样：

body, html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
div {
    background-color: tomato;
    z-index: -2;
}
.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #1a1a1a;
}
input[type="radio"].toggle + label:after {
  background: #1a1a1a;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}
<div>
    <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
    <label for="toggle-on" class="btn">Yes</label>
    <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
    <label for="toggle-off" class="btn">No</label>
</div>

推荐阅读