Jump to content

Hover Over To Change Background Color


jnf555
 Share

Recommended Posts

i have been trying to hover over a background to change color, then revert back when moved away<html><head><style type="text/css">.a{background-color : yellow;}.a:"hover" {background-color : blue;}.a {width:300px;height300px}</style></head><body><div class="a">hover over to change background color</div></body></html>hi can anyone tell me why this dont workthanks jnf555

Link to comment
Share on other sites

i have retyped in another notepad still dont work <html><head><style type="text/css">.a {background-color:yellow;}.a:hover {background-color:red;}.a {width:300px;height300px}</style></head><body><div class="a">hover over to change background color</div></body></html>thanksjnf555

Link to comment
Share on other sites

Guest FirefoxRocks

You need to put the browser in standards mode in order to :hover to work on non-anchor(link) elements. Add a DTD to the top of your document like this:HTML5:

<!DOCTYPE html><html>... blah blah blah

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>... blah blah blah

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>... blah blah blah

Without a DTD, the browser is in quirks mode and this will affect CSS behaviour. Also, it is height:300px; not height300px. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...