LESS mixin apply to nested DIV - html

Question

I have a nested div structure like this:
<div class="Button" id="StartButton" >
<div class="buttonIcon" id="startButtonIcon"></div>
<div class="buttonText" id="startButtonText">Start</div>
</div>
and a couple LESS mixins I use to format the parent div as a button shape, the icon as an actual image, and the text as special formatting like this:
.button-base() {
... LESS code here
}
.buttonIcon(#image) {
... LESS code
}
.buttonText() {
... LESS code
}
and here's my LESS structuring for the HTML:
#startButton {
.button-base();
#startButtonIcon {
.buttonIcon('img/icon_start_default.png', 'img/icon_start_hover.png');
}
#startButtonText {
.buttonText;
}
}
What I'd like to do is apply the hover selector in the .button-base() LESS mixin and have it change the image and text of the nested DIVs appropriately. I can't seem to figure out the right way to use the & selector in the parent Mixin.
I'm also open to restructuring the DIV group so that i can control the Icon & text from just 1 LESS mixin. I'm not sure how I would do that though, since i'm also such a beginner at HTML, LESS/CSS etc.
Any help is appreciated!
BTW, here's a jsFiddle that shows what I'm trying to accomplish. I know you can hard code the CSS, but I'm trying to avoid that and use best practices and automate as much as possible with the LESS code: http://jsfiddle.net/tLfqzq8c/3/

Answer 1

Here's what you loking for:
.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');
}
Here's the html:
<div class="Button" id="StartButton" >
Start
</div>