Несколько селекторов + вложенное правило

Question

У меня немного меньше, как показано ниже:

    .char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }

        .char6:hover{
        .transform(rotate(-30deg));
        }
    }

Итак, я хотел стилизовать состояние наведения char2-char6, но специально для char6, я хочу, чтобы у hover было несколько небольших дополнительных стилей.

Заранее спасибо

Answer 1

Я думаю, вы должны удалить char6: hover из определения char2-char6:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }
    }

.char6:hover{
        .transform(rotate(-30deg));
        }

Answer 2

Переместите код .char6:hover за пределы блока кода .char2, .char3, .char5, .char6 и удалите предыдущую точку из метода преобразования:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        transform(rotate(30deg));
        }
    }

.char6:hover{
 transform(rotate(-30deg));
        }

Я не знаком с вложенным синтаксисом &:hover, поэтому я верю вашему слову, что он действителен, пока у меня не будет возможности исследовать.

Answer 3

Нашли элегантное решение:

    .char2, .char3, .char5, .char6{
       display:inline-block;
       position:relative;

    &:hover{
       .text-shadow(@blueDark, 2px, 2px, 20px);
       bottom:0.1em;
       .transform(rotate(30deg));
    }

    &.char6:hover{
       .transform(rotate(-30deg));
    }
}

Мой собственный пример здесь: http://codepen.io/juanbrujo/pen/sdApx