CODEWITHSUNDEEP
cssinlineexternal
oshirowanen
oshirowanen

Reputation: 15925

inline css problem

I have the following script:

http://jsfiddle.net/oshirowanen/8mQ7x/1/

Which works fine, but as soon as I change to external css to add the background image using inline css methods, it stops working, as demonstrated here:

http://jsfiddle.net/oshirowanen/8mQ7x/

I need part of it to be inline css because the html is dynamically generated. I am trying to create many generic icons using different images for each icon, but using a generic css external file to cause the mouse over effect.

Why does this stop working when inline css is used to add the image and how can I get this to work?

Upvotes: 0

Views: 463

Answers (1)

artyom.stv
artyom.stv

Reputation: 2164

Because elements style CSS rule has higher priority than other CSS rules. By background in element style you are rewriting not only default background, but :hover too.

You should rewrite only background-image. Example: http://jsfiddle.net/8mQ7x/3/

Upvotes: 2

Related Questions