HTML\CSS: изменить фон ячейки для состояния наведения с помощью CSS

Посмотрите на этот пример jsFIDDLE

я хочу изменить цвет фона ячейки для состояния наведения с помощью CSS... это может быть достигнуто с помощью JavaScript, но я хочу сделать это с помощью CSS... плюс я хочу, чтобы вся ячейка действовала как ссылка, как это сделать

Источник

3 ответа

Решение

Есть несколько вещей, которые вы должны принять во внимание:

  • Не смешивайте CSS и презентационный HTML, иначе это станет очень запутанным. Цвета (для текста, фона, границ), размеры, выравнивание, все, что связано с внешним видом сайта, входят в CSS.

  • Старайтесь избегать таблиц в целях разметки. Они могут показаться более простыми для начинающих, но это устаревшая техника.

  • В CSS вам нужно переместить :hover править раньше :visited править. Поскольку оба правила имеют одинаковую специфику, первое правило (в настоящее время :visited) с предпочтениями и посещенным ссылкам никогда не будет применено правило наведения.

  • Вам не нужно повторять стили в CSS для каждого правила. Из-за наследования и каскадирования многие стили автоматически применяются к дочерним элементам.

  • Вам нужно установить цвета фона для ссылок вместо ячеек таблицы, тогда вы можете изменить цвет фона при наведении, как вы уже с цветом текста.

  • Предоставление ссылок display: block ссылки будут растягиваться по всей ширине содержащего его блока, так как это поведение по умолчанию для элементов блока.

Вот пример того, как должен выглядеть тот же макет с "чистым" CSS и HTML:

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

Источник

Дать меню table пометьте идентификатор и затем:

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

В действительности, однако, вы не должны использовать таблицы для чего-либо, кроме таблиц данных, их сложно поддерживать и нарушать семантику.

Источник

.menu_links:link { display: block }

Заставляет всю ячейку действовать как ссылка (хотя вам нужно будет добавить немного поля / отступа). Тогда вы можете просто добавить .menu_links:hover { background: #123123 } раскрасить фон.

Кроме того, я могу посоветовать вам установить все стили таблицы в таблице стилей. <table bordercolor="red" bgcolor="#ffffff"> очень устарел и делает обслуживание на сайте адом.

Источник
Другие вопросы по тегам