Question

是否可以使用用户操作伪类放置否定伪类？

例如：

a:hover:not(href) {
  color: blue;
}

// or //

a:not(href):hover {
  color: blue;
}

// or //

a:not(href) {
  &:hover {
    color: blue:
  }
}

这里，如果没有＆＃34; href＆＃34;，链接的悬停状态会变成蓝色。

我正在尝试使用＆＃34;输入[type =＆＃34; radio＆＃34;]＆＃34;如果未选中（：选中），则更改收音机的悬停状态。我知道这种听起来像是一个带有CSS的if else声明，我猜这是我试图稍微完成而不必使用js。

Answer 1

这可能没有帮助（总是一个好的开始答案），但如果你控制HTML，那么肯定是一种方式。我尝试了你期望代码的内容......

input[type="radio"]:not(:checked):hover {
    /* styles */
}

......但那并没有奏效。它闪烁着垃圾。

所以，我能想到的唯一方法是拥有一个相对定位的容器，然后绝对将两个元素放在其中，label和input，然后改变输入样式当你将鼠标悬停在标签上时。使用z-index我们可以将标签带到输入框上方。然后，由于for属性，我们可以确保在单击标签时仍然选中该复选框。

我在悬停时更改的样式是margin-top，它会拉出单选按钮。

<强> HTML

<span>
    <label for="radio1">Click me</label>
    <input id="radio1" type="radio" />
</span>
<span>
    <label for="radio2">Click me</label>
    <input id="radio2" type="radio" checked />
</span>

<强> CSS

span {
    position: relative; 
    display: inline-block;
    min-width: 13px;
}

label, input {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0;
}

label {
    z-index: 2;
    text-indent: -999em;
    width: 13px;
    height: 13px;
}

input {
    z-index: 1;
}

label:hover + input[type="radio"]:not(:checked) {
    margin-top: -10px;
}

<强>演示

http://jsbin.com/ifArIn/3/edit

具有否定伪类的用户操作伪类

1 个答案: