文章/答案/技术大牛

发布

问多个CSS规则或jquery
EN

Stack Overflow用户

提问于 2010-09-04 01:38:18

回答 2查看 285关注 0票数 1

以下是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悬停

这是一个可以用jQuery在2-3行代码中轻松完成的任务，但是对于这样简单的事情，必须加载库……我不确定这是否值得。

因此，您可以使用jQuery方法，或者根据需要复制粘贴任意数量的css规则。

只是一遍又一遍地做东西，让我的东西有更好的方式！

jquery

css

rules

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-09-04 01:41:23

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

票数 3

Stack Overflow用户

发布于 2011-09-30 11:35:12

@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是menu的唯一类，并且0是background的默认位置，这可能会使这一行变得不必要。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3638165

复制

相似问题

问多个CSS规则或jquery
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个CSS规则或jqueryEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个CSS规则或jquery
EN