HTML\CSS: change cell background for hover state with CSS

Question

look at this jsFIDDLE sample

i want to change the cell background color for hover state with CSS.. it can be attained through JavaScript but i want to do it with CSS... plus i want the whole cell to act as a link how to do it

Answer 1

Give the menu's table tag an id and then:

#menu-table td:hover { background: whatever; }

Really, though, you shouldn't be using tables for anything other than data tables, they are hard to maintain and break semantics.

Answer 2

.menu_links:link { display: block }

Makes the entire cell act as a link (you'll need to add a little margin/padding though). Then you can just add .menu_links:hover { background: #123123 } to colorize the background.

Also, I can advise you to set all the table's styles in a stylesheet. <table bordercolor="red" bgcolor="#ffffff"> is very outdated and makes maintenance on the site a hell.

Answer 3

There are several things you need to take into consideration:

• Don't mix CSS and presentational HTML otherwise it will get very confusing. Colors (for text, background, borders), sizes, alignment, anything that has to do with the look of the site belong into the CSS.

• Try to avoid tables for layout purposes. They may seem easier as a beginner, but it's an outdated technique.

• In the CSS you need to move the :hover rule before :visited rule. Since both rules have the same specificity the first rule (currently :visited) with take preference and visited links will never have the hover rule applied to.

• You don't need to repeat styles in CSS for every rule. Due to inheritance and cascading many styles are automatically applied to child elements.

• You need to set the background colors on the links instead of the table cells, then you can change the background color on hover just as you already are with the text color.

• Giving the links display: block will have the links stretch over the whole width of it's containing block, since that is the default behaviour of block elements.

Here is an example how the same layout with "clean" CSS and HTML should look like:

http://www.jsfiddle.net/QShRF/5/