0

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

例如：

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 的情况下稍微完成的事情。

4

1 回答 1

1

这可能无济于事（总是一个好的开始答案），但如果你控制 HTML，那么肯定有办法。我尝试了您期望的代码...

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

...但这没有用。这是闪烁和垃圾。

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

我在悬停时更改的样式是顶部边距，它将向上拉单选按钮。

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

于 2013-11-07T06:20:09.873 回答