3

这是我的style.less代码：

.transition {
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.shadow {
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #808080;
    -o-box-shadow: 0px 0px 10px #808080;
    -webkit-box-shadow: 0px 0px 10px #808080;
    box-shadow: 0px 0px 10px #808080;
}

    .shadow:hover {
        -moz-box-shadow: 0px 0px 10px #a5a5a5;
        -o-box-shadow: 0px 0px 10px #a5a5a5;
        -webkit-box-shadow: 0px 0px 10px #a5a5a5;
        box-shadow: 0px 0px 10px #a5a5a5;
    }


.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#t1 {
    .shadow;
    .transition;
    .radius;
}

但是当我悬停时#t1，阴影不会改变。我想知道为什么它不起作用并期望添加#t1:hover和继承样式还有其他方法吗？

4

2 回答 2

6

您需要更改.hover类以将:hover状态包含在类定义中：

.hover {
    ...styles...

    &:hover {
        ...hover state styles...
    }
}
.someOtherClass {
    .hover;
}

例子

于 2012-08-28T14:31:47.600 回答
2

为了:hover正确生成样式，您需要连接.shadow并.shadow:hover通过&运算符使它们属于一起：

.shadow {
    /*normal styles*/
    &:hover{
       /* hover styles */
    }
}

其余的可以保持不变，因为

#t1{
  .shadow;
}

现在将自动生成正常和悬停规则。

你可以在这里尝试一下：Online-Less-Converter

.shadow您通过运算符添加的每个附加块也&将自动应用到#t1，因此如果您添加另一个块：

.shadow{
    &:hover{}   
    &.foo{
       /* another set of rules*/
    }
}
#t1{
    .shadow; /* this will now generate 3 ruleblocks for #t1*/
}

规则块也将.foo生成#t1：

#t1{...}
#t1:hover{...}
#t1.foo{/* another set of rules*/}
于 2012-08-28T14:42:25.067 回答