將鼠標懸停在CSS精靈和文本上以同時更改顏色

Question

我有一個CSS精靈圖片和一個文字。 我想知道如何在圖像和文本上都懸停以使它們改變顏色。 這是CSS：

span#mail-to {
    background: url("/images/magenta_wpm_icons.png") -24px 0px;
    position: absolute;
    cursor: pointer;
    width: 23px;
    height: 15px;
}
a.button-link:hover,
a.button-link:active,
a.button-link:disabled {
    color: #ffffff;
    text-decoration: none;
    color: #75ba54;
    background-image: none;
    border-color: #75ba54 #339933 #006600;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}   
span#mail-to:hover {
    background-position: -24px -27px; 
}
a.button-link {
    padding-left: 3px;
    font-size: 15px;
    padding-right: 10px;
}

HTML：

<span id ="mail-to"> </span>                                            
<a class="button-link" href="mailto:">Mail to</a>

有任何想法嗎？？？

Answer 1

包裹span和anchor的標記div ，並在規定的懸停事件div （而不是在單個個體懸停處理span和anchor標記）。

HTML

<div class="mail-button-wrapper">
    <span id ="mail-to"> </span>
    <a class="button-link" href="mailto:">Mail to</a>
</div>

CSS

.mail-button-wrapper:hover #mail-to {
    // style the span here
}

.mail-button-wrapper:hover a.button-link {
    // style the anchor tag here
}

另外：您不需要說span#mail-to 。 只需說#mail-to 。
標識符是唯一的，因此添加span不會使引用比單獨擁有ID更具體。