Guest Aaron89 Posted November 5, 2005 Share Posted November 5, 2005 I'm having problems with changing the background color of a cell on hover. I know you can do it because I've done it in the past but forgot. It's driving me crazy! :)Here's the code regarding the cells:.nav {text-align: center;font-family: arial;color: #000000;font-size: 10px;background-color: #FFFFFF;padding: 3px;border: solid;border-color: #000000;border-width: 1px;}.nav:hover {text-align: center;font-family: arial;color: #000000;font-size: 10px;background-color: #999999;padding: 3px;border: solid;border-color: #000000;border-width: 1px;}I know the classes are defined in the HTML. It's almost like the .nav is overruling the .nav:hoverIs this just some newbish mistake?PLEASE HELP!! Link to comment Share on other sites More sharing options...
boen_robot Posted November 5, 2005 Share Posted November 5, 2005 I think the hover Pseudo-class works only on Anchors(<a> tags) and it doesn't work with any other elements. I tried using it on a span and an anchor and it worked only with the anchor. Link to comment Share on other sites More sharing options...
F-Man Posted November 5, 2005 Share Posted November 5, 2005 Your code looks fine. Just remember that IE sucks and only supports :hover on anchors. Link to comment Share on other sites More sharing options...
Jonas Posted November 6, 2005 Share Posted November 6, 2005 Yup, IE sucks. But I think there's a way to do it in IE as well:<table><tr><td width="200px" height="150px" bgcolor="blue" onmouseover="this.style.background='red'" onmouseout="this.style.background='blue'"></td></tr></table>Combine HTML DOM with the :hover suffix in your css, and you've got it.Of course, I'd recommend moving the width, height and bgcolor attributes to a stylesheet. I didn't bother typing the <html>, <head> and <body> tags etc. Since you're in the css forum, I guess you know how. Link to comment Share on other sites More sharing options...
F-Man Posted November 7, 2005 Share Posted November 7, 2005 I just remembered of an even better way if the content of your cells are anchor links. (which I think is the case because they have the class "nav").Use CSS to display anchor links as blocks, and then use :hover on them. This is particularly useful and accessible because then the link is part of the whole cell (assuming it applies margin: 0 by defaut). td.nav a { display: block; background-color: white;}td.nav a:hover { background-color: #999} Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now