Как сделать так, чтобы 2 элемента имели одинаковое состояние ролловера в CSS?

Question

Мне нужна кнопка, состоящая из некоторого текста и значка рядом с ним. Я могу указать, что у каждого есть состояние: hover в CSS, чтобы изменить его внешний вид, но как я могу расположить свой CSS / HTML таким образом, чтобы при наведении на текст также менялось состояние наведения изображения, и наоборот?

Желательно избегать JS.

Обновление : Текущее состояние моей игры вокруг ...

<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;
}

Answer 1

С вашим HTML, изменение background-position div - это просто вопрос:

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

Таким образом, background-position изменяется только тогда, когда его родитель попадает.

---

Это оригинальный ответ, который я разместил до того, как вы обновили свой вопрос: я обычно организую свой HTML-код следующим образом

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

РЕДАКТИРОВАТЬ : как @Paul D.Заметьте, что в комментариях эта структура HTML недопустима в HTML4, поскольку a может содержать только встроенные элементы.Таким образом, чтобы исправить это, мы можем изменить структуру таким образом, имея span s в качестве потомков a.CSS остается прежним, добавляя, в случае необходимости, display: block.

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

и ваш CSS следующим образом:

.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>

и CSS

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

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

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

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

Answer 2

Заключите оба в один элемент и добавьте: hover к этому элементу:

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