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

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

2 голосов
/ 21 сентября 2010

посмотрите на этот jsFIDDLE образец

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

Ответы [ 3 ]

6 голосов
/ 21 сентября 2010

Есть несколько вещей, которые необходимо учитывать:

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

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

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

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

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

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

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

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

2 голосов
/ 21 сентября 2010

Дайте тегу table меню идентификатор, а затем: 

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

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

0 голосов
/ 21 сентября 2010

.menu_links:link { display: block }

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

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

...