为什么选中的单选按钮的背景颜色与悬停状态的背景颜色重叠？

Question

我正在处理一些表单元素，我有一个单选按钮，悬停时它会将背景变成灰色；选中后，背景变为绿色。

我已经编写了 CSS 代码，它完全符合我的要求。但是 CSS 语法让我很困惑。

   .opt-container:hover .new-button, .opt-container:hover .button-label {
     background-color: rgba(0,0,0,0.5);
    }

    .opt-container input:checked ~ .new-button, .opt-container input:checked ~ .button-label {
     background-color: #7EE29E;
    }

<label class="radio-label">
  <div class="opt-container">
    <input type="radio" name="gender" class="radio-button" value="m" checked="checked">
    <span class="new-button"></span>
    <div class="button-label">
      Male
    </div>
  </div>
</label>
<label class="radio-label">
  <div class="opt-container">
    <input type="radio" name="gender" class="radio-button" value="f">
    <span class="new-button"></span>
    <div class="button-label">
      Female
    </div>
  </div>
</label>

代码有效。当悬停新按钮（替换默认单选按钮）时，按钮标签（标签）的背景颜色为灰色。单击后变为绿色。

以.opt-container为父元素（包含新按钮和按钮标签的框）。

我对如何翻译代码有点困惑，尤其是 "selected state"。

示例：如果我从选中状态删除 opt-container，当我将光标放在它上方时，该框将再次变为灰色（但当光标不悬停在它上方时，它仍然是绿色）。

为什么会和悬停代码重叠？

Answer 1

好的。我只是复制粘贴了您的代码（HTML 和 CSS）。

解释

.opt-container:hover .new-button,
.opt-container:hover .button-label {
   background-color: rgba(0, 0, 0, 0.5);
}

这段代码非常简单。当悬停 opt-container div 时，.button-label 和 button-label 的背景将变为灰色（不透明度为 0.5 的黑色）

.opt-container input:checked~.new-button,
.opt-container input:checked~.button-label {
    background-color: #7EE29E;
 }

单击输入或其标签时，输入处于选中状态。在 <label> 元素内，单击 label 元素内的任意位置时，输入将获得 checked 状态。

所以上面的代码意味着当输入被选中时，将按钮和标签背景颜色更改为 7EE29E = 一些绿色阴影。 ~ 用于 select 元素之后的所有兄弟。是否相邻（紧随其后）。所以才叫一般兄妹selector.

所以在第一行中使用 + 相邻的兄弟 select 或因为 new-button 就在 input 之后会更具体。但是使用 ~ 并不是一个错误，而且在第二行中也需要它，因为 button-label 是兄弟而不是 input 的相邻兄弟所以你可以 select 只有~.

在此特定情况下您不需要使用 .opt-container，因为我在您的 HTML 结构中没有看到任何其他标签或输入。在这种情况下，它只是 CSS 特异性。在这里查看更多 -> CSS Specificity

如果您还有其他问题，请在评论中告诉我。

.opt-container {
  position: relative;
  max-width: 80%;
  left: 100px;
  cursor: pointer;
  font-size: 22px;
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.opt-container input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.button-label {
  position: relative;
  background-color: #DCDCDC;
  border-radius: 5px;
  max-width: 660px;
  left: 50px;
  padding-left: 10px;
}

.radio-label {
  cursor: pointer;
}

.new-button {
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: #eee;
  border-radius: 50%;
}

.opt-container:hover .new-button,
.opt-container:hover .button-label {
  background-color: rgba(0, 0, 0, 0.5);
}

.opt-container input:checked~.new-button,
.opt-container input:checked~.button-label {
  background-color: #7EE29E;
}

<label class="radio-label">
  <div class="opt-container">
    <input type="radio" name="gender" class="radio-button" value="m" checked="checked">
    <span class="new-button"></span>
    <div class="button-label">
      Male
    </div>
  </div>
</label>
<label class="radio-label">
  <div class="opt-container">
    <input type="radio" name="gender" class="radio-button" value="f">
    <span class="new-button"></span>
    <div class="button-label">
      Female
    </div>
  </div>
</label>

为什么选中的单选按钮的背景颜色与悬停状态的背景颜色重叠？

Why does the background color of a selected radio button overlap with the hover state one?

html

css

pseudo-element