Html 将鼠标悬停在css精灵和文本上，同时更改颜色

我有一个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

和

anchor

标记包装在

div

中，并定义

div

上的悬停事件（而不是单个

span

和

anchor

标记上的单个悬停处理）

HTML

另外：你不需要说

span#mail to

。只要说

#发邮件到


标识符是唯一的，因此添加
span
并不会使引用比单独使用id更具体。
谢谢，它起到了作用。但在文本和图像上都出现悬停时会有延迟。它首先改变图像颜色，然后在1秒内改变文本颜色。感谢您的编辑和建议。然而，当图像和文本上发生颜色变化时，似乎仍有时间延迟。它首先更改图像的颜色，延迟1秒后更改文本颜色。我不明白为什么会这样。@user2942566-你能创建一个JSFIDLE或共享一个显示延迟的站点链接吗？你能用JSFIDLE或codepen显示一个例子吗？如果能看到代码的运行情况，那将是很有帮助的。
<span id ="mail-to"> </span>                                            
<a class="button-link" href="mailto:">Mail to</a>

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

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

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