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?

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/