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

Question

The title might be a little bit confusing. Let me explain my problem: I am using CSS image stripes for social buttons. Here is a quick example:

.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;
}

Now there is my jQuery part:

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

Now, while hovering the button there is no change of the image stripe. Why?

Answer 1

That's because you are cascading styles by inline CSS.

Take a look at the example below:

HTML

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

CSS

a:hover {
  background-color: gold;
}

a {
  background-color: orange;
}

And finally the JS

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

JSBin Demo 1

By using jQuery.css(); method, you add the CSS as inline style to the selected element, which it has a higher priority than internal or external styles.

You can make the :hover declaration !important to set its priority higher:

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

JSBin Demo 2

Answer 2

My suggestion would be avoid doing the styling in your Javascript.

Instead have a 'dark' class

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

And just toggle it on and off as required.

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