logo标签列表

使用<span>元素的:hover伪类

cssimagehoverrollover
6

我正在使用以下技术：

#top ul li.corner span.right-corner:hover
{
    background-image:url("images/corner-right-over.gif");
    width:4px;
    height:15px;
    float:left;
}

#top ul li.corner span.left-corner:hover
{
    background-image:url("images/corner-left-over.gif");
    float:left;
    width:4px;
    height:15px;
}

我似乎无法正确使用:hover，不确定原因，有人有什么建议吗？

"top" 在 CSS 选择器中是什么意思？如果它是一个元素 ID，那么应该写成 "#top"。 - defeated
它没有打印出#号，但是在我的CSS中有。 - user39980
@RoBorg - 感谢您的编辑，我刚刚重新登录以执行相同的操作，因为有两个人认为我忘记了“#”再次感谢 - user39980
我不太确定你想要实现什么。你是想让背景图片只在鼠标悬停在角落时改变吗？ - foxy
这没什么意义，就像Foxy所说的那样。当“正确”没有被定义且不清楚时，很难帮助你使其正常工作。 - sliderhouserules
4个回答
10

我认为问题在于SPAN元素默认显示为行内元素 - 这意味着它们没有高度和宽度。尝试通过添加显式的块级元素来解决：

#top ul li.corner span.right-corner, #top ul li.corner span.left-corner
{
    display: block;
}
5
在你的HTML文档的第一行写入<!DOCTYPE html>，所有类型的元素都应启用悬停支持。
好的点子... 比如内联文本，不需要是块级元素。 - sheriffderek
0
正如评论者所指出的那样，“top”不是一个有效的选择器。应该是“#top”或“.top”。
0
你在测试IE浏览器吗？IE7及以下版本只支持:hover在<a>标签上（不确定IE8是否支持）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接