html - 悬停时更改背景图像的位置

Question

我有一个 png，其中包含 2 个相同的图像，除了文本颜色。

我正在尝试更改鼠标悬停时背景图片的位置，以便看起来文本颜色正在发生变化。

我在CSS中有这个

.twitter { 
    display:block;
    position:absolute;
    width:184px;
    height:83px;
    background:url(../images/twitter.png) 0 0 no-repeat;
    top:276px;
    right:34px;
}
.twitter:hover {
    background:url(../images/twitter.png) 0 -82px no-repeat;
}

我的 html 中有这个:

<a href="https://twitter.com/simplio_sa" class="twitter"></a>

第一个问题是图像不会移动/更改以显示其他文本颜色。

另一个问题是，当我将光标放在图像上时，它是不可点击的。光标不变。

Answer 1

原来是图片在其他元素下面，所以我把 z-index 改成了 99999。