首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS: LINK:HOVER背景图像似乎可以工作,但一旦悬停就不会出现

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

Stack Overflow用户
提问于 2012-09-10 22:39:57
回答 1查看 948关注 0票数 0

示例:

代码语言:javascript
运行
复制
.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>元素中显示为背景图像。

问题是,一旦你悬停了链接,状态链接就消失了(图片twitter.jpg),而不是直接出现在悬停之后(图片twitter_hover.jpg),你看到的是什么都没有。因此,当你拿出鼠标链接时,它会再次出现。其目的是在悬停后加载一个不同的悬停图像。

为什么它不工作?

新建编辑/

从其余部分的注释看来,代码是正确的。我也认为这是正确的。我跨越了不同的图像,我发现我只对我想要悬停的图像有问题。我尝试过不同的格式,等等。还是老样子。我甚至打开了链接图像,用photoshop更改了颜色,并再次保存为jpg。也不能工作...

我附上这两张照片,看看你是否知道解决方案是什么…

EN

回答 1

Stack Overflow用户

发布于 2012-09-10 22:54:38

我想它必须是小写的,并且你需要尊重正确的顺序:

LoVe HAte

链接、已访问、悬停、活动

代码语言:javascript
运行
复制
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');
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12353988

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档