0

标题可能有点混乱。让我解释一下我的问题：我将 CSS 图像条纹用于社交按钮。这是一个简单的例子：

.appnet {
     display:block;
     width:64px;
     height:64px;
     background: url('http://yanlu.de/files/images/SocialButtons.svg') no-repeat;
     background-position:-256px 0;
     margin-right: 10px;
     margin-left: 10px;
}
.appnet:hover {
     background-position:-256px -64px;
}
.appnet:active {
     background-position:-256px -128px;
}

现在有我的 jQuery 部分：

$('.appnet').css('background-position','-256px -192px');

现在，当悬停按钮时，图像条纹没有变化。为什么？

4

2 回答 2

2

那是因为您通过内联 CSS 级联样式。

看看下面的例子：

HTML

<a href="">:hover is not working, yea?</a>

CSS

a:hover {
  background-color: gold;
}

a {
  background-color: orange;
}

最后是 JS

$('a').css('background-color', 'lightgreen');

JSBin 演示 1

通过使用jQuery.css();方法，您将 CSS 作为内联样式添加到选定元素，它的优先级高于内部或外部样式。

您可以进行:hover声明!important以将其优先级设置得更高：

a:hover {
  background-color: gold !important;
}

JSBin 演示 2

于 2013-08-05T10:14:04.887 回答
0

我的建议是避免在您的 Javascript 中进行样式设置。

取而代之的是“黑暗”课程

.dark {
    background-position: -256px -192px;
}

只需根据需要打开和关闭它。

$('.appnet').toggleClass('dark');
于 2013-08-05T10:34:28.517 回答