0

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?

Improve this question
5
  • Inline css sample, works fine on my end. I am using FF 3.6 Commented Feb 24, 2011 at 9:42
  • So using the inline method to add the image, does the image still change color when you mouse over it? Commented Feb 24, 2011 at 9:44
  • It does not work for me in fx4, chromium 11, or internet explorer 8. Commented Feb 24, 2011 at 9:45
  • Also, you should not use :hover for tags other than <a/> - not all browsers support :hover for any html tag. Commented Feb 24, 2011 at 9:47
  • It is due to precedence. CSS on the element take precedence over external css Commented Feb 24, 2011 at 9:49

1 Answer 1

Reset to default
2

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I have given an example. Is that ok, or you wanted to implement something else?
Fiddle link is broken

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.