посмотрите на этот jsFIDDLE образец
я хочу изменить цвет фона ячейки для состояния наведения с помощью CSS ... это может быть достигнуто с помощью JavaScript, но я хочу сделать это с помощью CSS ... плюс я хочу, чтобы вся ячейка действовала как ссылка, как это сделать
Есть несколько вещей, которые необходимо учитывать:
Не смешивайте CSS и презентационный HTML, иначе это станет очень запутанным. Цвета (для текста, фона, границ), размеры, выравнивание, все, что связано с внешним видом сайта, относится к CSS.
Старайтесь избегать таблиц в целях разметки. Они могут показаться более простыми для начинающих, но это устаревшая техника.
В CSS вам нужно переместить правило :hover до правила :visited. Поскольку оба правила имеют одинаковую специфику, к первому правилу (в настоящее время :visited) с предпочтением принятия и посещенными ссылками никогда не будет применяться правило наведения.
:hover
:visited
Вам не нужно повторять стили в CSS для каждого правила. Из-за наследования и каскадирования многие стили автоматически применяются к дочерним элементам.
Вам нужно установить цвета фона для ссылок вместо ячеек таблицы, затем вы можете изменить цвет фона при наведении, как вы уже с цветом текста.
Предоставление ссылок display: block будет растягивать ссылки на всю ширину содержащего его блока, поскольку это поведение по умолчанию для элементов блока.
display: block
Вот пример того, как должен выглядеть тот же макет с «чистым» CSS и HTML:
http://www.jsfiddle.net/QShRF/5/
Дайте тегу table меню идентификатор, а затем:
table
#menu-table td:hover { background: whatever; }
Действительно, однако, вы не должны использовать таблицы для чего-либо, кроме таблиц данных, их сложно поддерживать и нарушать семантику.
.menu_links:link { display: block }
Заставляет всю ячейку действовать как ссылка (хотя вам нужно будет добавить немного поля / отступа). Затем вы можете просто добавить .menu_links:hover { background: #123123 }, чтобы раскрасить фон.
.menu_links:hover { background: #123123 }
Также я могу посоветовать вам установить все стили таблицы в таблице стилей. <table bordercolor="red" bgcolor="#ffffff"> очень устарел и делает обслуживание сайта адом.
<table bordercolor="red" bgcolor="#ffffff">