Question

Hi I was wondering how I can take styles from another class on a hover state in LESS. At the moment I have:

.language .active {
    background:#de1f24;
    color:#ffffff;
    padding:7px;
    text-align:center;
    border-bottom: solid 1px #3A3838;
    display: inline-block;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius:4px;
    font-weight:bold;
}

.language a {
    color:red; 
    font-weight:bold;
}

&:hover{
    &:extend(.language);
}
Was it helpful?

Solution

.fontSize{
    font-size:22px;
}

.box{
    color:#fff;
    width:50px;
    height:50px;
    background:red;
    font-size:14px;
    &:hover{  /*This will add Hover effect to .box */
        .fontSize;  /*This will inherit the style from the .fontSize class*/
        background:blue;
    }
}

Codepen Demo : http://codepen.io/anon/pen/rHghJ

OTHER TIPS

I am not sure I understood a question. But try using this construction

.language a {
    color:red;
    font-weight:bold;
    &:hover {color:blue;}
}
.language-2 a {
    .language a:hover;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top