Псевдокласс класса пользователя с отрицательным псевдоклассом

Question

Можно ли поставить псевдонижирующий класс с псевдо-классом пользователя?

Например:

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

// or // 

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

// or // 

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

Здесь парения состояние линии превратит синий цвет, если это не было «HREF».

Я пытаюсь использовать это с «input [type =" radio "]" и изменить состояние наведения радиоприемника, если оно не отмечено (: отмечено). Я знаю такие звуки, как if if else с CSS, и я предполагаю, что это то, что я пытаюсь выполнить, не используя js.

Answer 1

Это может не помочь (всегда хорошее начало ответа), но если вы контролируете HTML, то определенно есть способ. Я пробовал, что вы ожидаете от кода ...

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

... но это не сработало. Он мерцал и мучился.

Итак, единственный способ, которым я мог подумать, состоял в том, чтобы иметь относительно позиционируемый контейнер, а затем абсолютно позиционировать два элемента внутри него: label и 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; 
} 

Demo

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