Untitled

How can I make 2 elements share the same rollover state in CSS?
<a class="close"><div class="closebutt"></div></a>

a.close {
    float:right;
    font-size:12px;
    color: #a7dbe6;
    text-decoration:underline;
}
a.close:hover  {
    color: #fff;
}
a.vs_rewardClose:before {
    content:"Close "
}
.closebutt {
    background: url(images/close.gif) no-repeat;
    display:inline-block;
    width:14px;
    height:14px;
}
.closebutt:hover {
    background-position: 0px -14px;
}

.close:hover > .closebutt {
  background-position: 0px -14px;
}

<a href="#" class="button">
    <div class="glyph"></div>
    <div class="text">Button text</div>
</a>

<a href="#" class="button">
    <span class="glyph"></span>
    <span class="text">Button text</span>
</a>

.button {
  /* .. general style */
}

  .button > .glyph {
    /* .. general style for the glyph, like size or display: block */
    background-image: url('..');
    background-repeat: no-repeat;
    background-position: left top;
  }

  .button > .text {
    /* .. general style for the text, like font-size or display: block */
    text-decoration: none;
  }

  .button:hover > .glyph {
    /* .. change the glyph style when the button is hovered */
    background-position: left bottom;
  }

  .button:hover > .text {
    /* .. change the text style when the button is hovered */
    text-decoration: underline;
  }

<a href="#" class="button red">
    <div class="glyph"></div>
    <div class="text">Button text</div>
</a>
<a href="#" class="button gray">
    <div class="glyph"></div>
    <div class="text">Button text</div>
</a>

.button.red {
  background-color: red;
}

  .button.red > .text {
    color: black;
  }

.button.gray {
  background-color: darkgray;
}

  .button.gray > .text {
    color: white;
  }

.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}