Question

我正在尝试在wordpress网站上的自定义破火山口表单中添加自定义CSS样式。我要实现的目标是在我的广播清单中添加悬停样式
现在我只能在子弹上添加样式，我目前仍然坚持在字段上添加悬停样式这是表格的链接

这是我使用过的CSS

.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
    cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
    font-family: FontAwesome !important;
    font-size: px;
}
input[type=radio]:before {
    content: '\f111';
    border-radius: 50%;
    padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
    content: '\f14a';
    color: red;
    background: red;
    border-radius: 3px;
    padding: 2px;
}
input[type=radio]:checked:before {
    color: red;
}

Answer 1

经检查，您的表单（HTML）的结构如下：

<div class="radio">
  <label>
    <input type="radio">
  </label>
</div>

由于您在label中使用了嵌套输入，因此甚至不需要for/id属性，但是我猜想它是由表单自动生成的。顺便说一句，您可以控制HTML的结构吗？还是提议的表单只是将其吐出来？

对于您当前的结构，可以这样设置样式：

.radio:hover > label {
  /* add the style for the label */
}

.radio:hover input[type="radio"] {
  /* add the style for the radio button */
}

无论您需要将样式应用于什么，都可以“侦听”父项上的鼠标悬停，然后将其直接子项作为目标。你明白了。

编辑：我不好。我说过，输入嵌套在标签内部。因此，radio:hover > input不会将其定位。省略>，它将以div为.radio的div为目标。对不起，可能造成混乱。您可以了解有关CSS选择器及其here之间差异的更多信息。

Answer 2

这应该有效。您的单选按钮和标签位于“ radio”类中。您可以在此处删除.form-group引用，除非您不希望将此样式应用于页面上的其他位置。

.form-group .radio:hover {
   cursor: pointer;
   background-color: grey;
   border: 2px solid blue;
   border-radius: 5px;
   // other hover properties
}

破火山口表单上的自定义悬停CSS样式

2 个答案: