Как я могу применить правила к ячейке только тогда, когда строка не перемещается?

У меня есть таблица, где:

  • Строки и ячейки обычно не имеют заданного фона; фон таблицы просвечивает.
  • Ряды с :hover у псевдокласса есть цвет фона, чтобы выделить их - например, чтобы отслеживать строки, когда мышь перемещается по таблице (в IE7 и во всем остальном современном).
  • Некоторые ячейки должны быть выделены другим цветом фона (и различными другими стилями); у них есть свой собственный класс.

Проблема в том, что я хочу, чтобы специальные ячейки не были особенными, когда строка подсвечивается при наведении курсора; это выглядит действительно странно. Мне нужно поддерживать IE7 (к счастью, не 6!) И естественно хочу поддерживать Chrome, Firefox, Safari и большинство других современных браузеров.

Вот урезанные версии соответствующих правил:

table.status
{
    border-collapse:  collapse;
    background-color: #CDD8ED;
}
table.status tr:hover
{
    background-color: #FAF0BD;
}
/* "down" cells are special */
table.status td.down
{
    background-color: #D22;
    color:            white;
}

Вещи, которые я пробовал:

  • :not псевдокласс из CSS3: table.status tr:not(:hover) td.down, Работает в Chrome и Firefox, а не в IE7.
  • Более конкретное правило (например, table.status tr:hover td.down), который повторяет свойства, используя ключевое слово inherit, (Выраженно хрупко, нужно быть уверенным при добавлении стилей к одному правилу, которое вы добавляете, наследуют стили к другому правилу.) Снова работает в Chrome и Firefox, а не в IE7.

Вещи, которые я действительно не хотел бы делать:

  • Более конкретное правило, устанавливающее соответствующие стили, чтобы они соответствовали стилям таблицы. Blech, даже более хрупкий, чем inherit вещь выше. Но функционально.
  • Используйте JavaScript для эффекта наведения (хотя это также имеет преимущество в поддержке IE6). Наведение в JavaScript, как правило, связано с большими накладными расходами, чем встроенные.

Есть ли другое решение CSS?

FWIW, вот моя тестовая страница:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Hover Test Page</title>
<style type='text/css'>
body
{
    font-family: sans-serif;
}
table.status
{
    border-collapse: collapse;
    background-color: #CDD8ED;
}
table.status th
{
    text-align: left;
    background-color: #14429E;
    color: #FEFEFE;
}
table.status td, table.status th
{
    padding: 2px 0.5em;
}
table.status tr:hover
{
    background-color: #FAF0BD;
}
/*table.status tr:not(:hover) td.down*/
table.status td.down
{
    background-color:   #D22;
    color:              white;
    font-weight:        bold;
}
/*table.status tr:hover td.down
{
    background-color:   inherit;
    color:              inherit;
    font-weight:        inherit;
}*/
</style>
</head>
<body>
<table class='status'>
    <thead>
        <tr>
            <th>Server</th>
            <th>Details</th>
            <th>www</th>
            <th>mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Server1</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='up'>Up</td>
        </tr>
        <tr>
            <td>Server2</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='down'>Down</td>
        </tr>
        <tr>
            <td>Server3</td>
            <td>blah blah blah</td>
            <td class='sched'>Down (scheduled)</td>
            <td class='sched'>Down (scheduled)</td>
        </tr>
        <tr>
            <td>Server4</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='up'>Up</td>
        </tr>
    </tbody>
</table>
</body>
</html>
Источник

3 ответа

Решение

Так как вы использовали border-collapse на столе, вы можете достичь того, что вы хотите, сделав это:

table.status tr:hover td
{
    background-color: #FAF0BD;
}

..вместо..

table.status tr:hover
{
    background-color: #FAF0BD;
}

Я понял ваш вопрос так, как вы хотите, чтобы правила tr:hover имели приоритет над особыми ячейками. В этом случае в вашей разметке это ячейки с class="down", правильный? Так как вы используете border-collapse, цвета фона <td>смешаться внутри <tr>, Надеюсь это поможет.

Источник

Я не уверен, что понимаю вас.... но я думаю, что это может сработать

table.status td.down, table.status td.down:hover
{
    background-color: #D22;
    color:            white;
}
Источник

Что плохого в том, чтобы просто удалить белый цвет из специальных ячеек, когда вы наводите курсор на строку таблицы? (Не проверено - только IE6 на работе).

/ * ячейки "вниз" особенные, но при наведении заставляют их выглядеть как другие */

table.status tr:hover td.down
{ 
    background-color: #FAF0BD; 
    color:            black; 
}

Это может быть более эффективным, если у вас был полный тип документа. например

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Изменить: Nevermind - не читал полный вопрос - удачи с этим!

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