Question

我有一个css sprite图像和除此之外的文本。我想知道如何在图像和文本上进行悬停以使它们改变颜色。这是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上定义悬停事件（而不是单个{{1}上的单独悬停处理}和span标签）。

HTML

anchor

CSS

<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 }。只要说span#mail-to 标识符是唯一的，因此添加#mail-to并不会使引用比具有ID本身更具体。

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

1 个答案: