Question

这是sprite菜单的一些“普通”代码

#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用于悬停

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

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

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

Answer 1

使用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; }

Answer 2

@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的默认位置可能会使此行不必要。

多个CSS规则或jquery

2 个答案: