CSS圖像條紋懸停效果不適用於jQuery

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演示1

通過使用jQuery.css(); 方法，將CSS作為內聯樣式添加到所選元素，它具有比內部或外部樣式更高的優先級。

你可以使:hover聲明!important是將其優先級設置得更高：

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

JSBin演示2

Answer 2

我的建議是避免在你的Javascript中做樣式。

相反，有一個'黑暗'類

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

然后根據需要打開和關閉它。

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