1

这是精灵菜单的一些“正常”代码

#menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

#menu li.m1 a{ background-position:0px 0px; }
#menu li.m1 a:hover{ background-position:0px -55px; }
#menu li.m1 a.selected{ background-position:0px -55px; }

我有 6 个不同的项目，这将需要 6 个不同的类 x 3 用于悬停

这是一个可以用 jQuery 在 2-3 行中轻松完成，但是必须为简单的事情加载一个库......不确定它是否值得......

因此，您将使用 jQuery 方法，或者根据需要复制粘贴尽可能多的 css 规则......

只是一遍又一遍地做事情，让我觉得有更好的方法！

4

2 回答 2

3

使用 CSS 并使用类而不是 ID。然后你不需要复制：

.menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

.menu li.m1 a{ background-position:0px 0px; }
.menu li.m1 a:hover{ background-position:0px -55px; }
.menu li.m1 a.selected{ background-position:0px -55px; }
于 2010-09-03T17:41:22.600 回答
0

@GenericTypeTea 在这里有正确的答案。但是你可以让你的 css 小一，也许两行

a) 组合.menu li.m1 a:hover和.menu li.m1 a.selected这样

.menu li.m1 a:hover, .menu li.m1 a.selected{ background-position:0px -55px; }

和

b) 可能删除.menu li.m1 a{ background-position:0px 0px; }

假设.m1是菜单的唯一类，并且 0 0 是默认位置，background可能会使这一行变得不必要。

于 2011-09-30T03:35:11.583 回答