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，我希望悬停有一些小的额外样式。

提前致谢

Answer 1

我认为你应该删除char6：将鼠标悬停在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

多个选择器+嵌套规则

3 个答案: