Question

I have some less like below:

    .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));
        }
    }

So what I meant to do is to style char2-char6 hover state but specifically for char6, i want the hover to have some small extra styles.

Thanks in advance

Answer 1

Move your .char6:hover code outside of your .char2, .char3, .char5, .char6 code block and remove the preceeding dot from the transform method:

.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));
        }

I’m not familiar with the &:hover nested syntax so I’m taking your word for it that it’s valid until I’ve had chance to research.