Question

标题可能有点令人困惑。让我解释一下我的问题：我正在使用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');

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

Answer 1

那是因为你是通过内联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 Demo 1

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

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

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

<强> JSBin Demo 2

Answer 2

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

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

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

然后根据需要打开和关闭它。

$('.appnet').toggleClass('dark');

CSS图像条纹悬停效果不适用于jQuery

2 个答案: