带有否定伪类的用户操作伪类答案

【问题标题】：User-action pseudo class with a negating pseudo class带有否定伪类的用户操作伪类
【发布时间】：2013-11-07 14:20:09
【问题描述】：

是否可以将否定伪类与用户操作伪类一起放置？

例如：

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

// or //

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

// or //

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

在这里，如果没有“href”，链接的悬停状态将变为蓝色。

我正在尝试将它与“input[type="radio"]”一起使用，并在未选中 (:checked) 时更改收音机的悬停状态。我知道这种听起来像是带有 CSS 的 if else 语句，我想这就是我试图在不使用 js 的情况下稍微完成的事情。

【问题讨论】：

你试过了吗？会发生什么？

标签： html css css-selectors pseudo-class

【解决方案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

【讨论】：