CSSで2つの要素を同じロールオーバー状態にするにはどうすればよいですか？

Question

テキストとその隣にアイコンがあるボタンが必要です。 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の場合：この要素にカーソルを移動divのbackground-positionを変更することは、単なる問題です。

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

EDIT：@Paul D.ウェイトは、コメントで指摘してaにはインライン要素のみを含めることができるため、このHTML構造はHTML4では無効です。したがって、これを修正するには、spanをaの子として持つこのように構造を変更することができます。 CSSは同じままで、必要に応じて最終的にdisplay: blockを追加します。あなたもこのような方法で、ボタンに新しいクラスを追加するスタイルを変更することができます。このように

.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"> 
    <span class="glyph"></span> 
    <span class="text">Button text</span> 
</a> 

と、このようにあなたのCSS

<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

の両方で一つの要素を囲み、追加：

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