CSS: LINK:HOVER 背景图像似乎可以工作，但一旦悬停就不会出现

Question

例子：

.twitter:LINK{
     width: 15px;
     height:15px;
     display:block;
     background-image: url('../_img/social_butt/twitter.jpg');
}

.twitter:HOVER{
     width: 15px;
     height:15px;
     display:block;
     background-image: url('../_img/social_butt/twitter_hover.jpg');
}

如您所见，代码相同，路径也相同。这两张图片完全在同一个文件夹中，我仔细检查了名称。这在 <a> 元素内显示为背景图像。

问题是，一旦您将链接悬停，状态 LINK 就会消失（图片 twitter.jpg），而不是出现在 HOVER 之后（图片 twitter_hover.jpg），您什么都看不到。因此，当您取出鼠标时，LINK 会再次出现。目的是在悬停后加载不同的悬停图像。

为什么它不起作用？

新编辑/////////////////////////

其余的 cmets 似乎代码是正确的。我也觉得是对的。我跨越了不同的图像，我发现我想要悬停的图像只有问题。我尝试了不同的格式等......仍然是一样的。我什至打开了 LINK 图像并用 Photoshop 更改了颜色并再次保存为 jpg。也不行……

我附上两张图片，看看你是否知道有什么解决办法...

Answer 1

我猜它必须是小写的，你需要遵守正确的顺序：

爱恨交加

链接、访问、悬停、活动

a.twitter:link, a.twitter:visited {
     width: 15px;
     height:15px;
     display:block;
     background-image: url('../_img/social_butt/twitter.jpg');
}
a.twitter:hover, a.twitter:active{
     width: 15px;
     height:15px;
     display:block;
     background-image: url('../_img/social_butt/twitter_hover.jpg');
}