Question

我有一个嵌套的div结构，如下所示：

<div class="Button" id="StartButton" >
    <div class="buttonIcon" id="startButtonIcon"></div>
    <div class="buttonText" id="startButtonText">Start</div>
</div>

和一些LESS mixin我用来将父div格式化为按钮形状，图标作为实际图像，文本作为特殊格式设置如下：

.button-base() {
     ... LESS code here
}

.buttonIcon(@image) {
    ... LESS code
}

.buttonText() {
   ... LESS code
}

这是我对HTML的结构：

#startButton {
    .button-base();

    #startButtonIcon {
            .buttonIcon('img/icon_start_default.png', 'img/icon_start_hover.png');
            }

    #startButtonText {
            .buttonText;
            }
   }

我想要做的是在hover LESS mixin中应用.button-base()选择器，并让它适当地更改嵌套DIV的图像和文本。我似乎无法找到在父Mixin中使用&选择器的正确方法。

我也愿意重组DIV小组，以便我可以控制Icon＆amp;来自1 LESS mixin的文字。我不知道如何做到这一点，因为我也是HTML，LESS / CSS等初学者。

感谢任何帮助！

顺便说一句，这是一个jsFiddle，显示了我想要完成的事情。我知道您可以对CSS进行硬编码，但我正在尝试避免这种情况并使用最佳实践并尽可能使用LESS代码进行自动化：http://jsfiddle.net/tLfqzq8c/3/

Answer 1

这就是你要找的东西：

.Button {
    width: 115px;
    height: 30px;
    border-color: #ececec;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    display: inline-block;
    color: #666666;
    background: #ececec url('http://res1.windows.microsoft.com/resbox/en/6.3/main/89ff52cc-8b6d-4a8e-bae3-5bfca40dcb59_18.png') no-repeat 10%;
}
.Button:hover {
    color: white;
    background-image: url('http://www.phiadariasoft.com/main/images/windows_icon.png');
}

这是html：

<div class="Button" id="StartButton" >
    Start
</div>

less mixin适用于嵌套DIV

1 个答案: