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

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

0 голосов
/ 11 февраля 2010

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

  • Строки и ячейки обычно не имеют заданного фона; фон таблицы просвечивает.
  • Строки с псевдоклассом :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 ]

1 голос
/ 12 февраля 2010

Поскольку вы использовали 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>. Надеюсь, это поможет.

0 голосов
/ 11 февраля 2010

Что плохого в том, чтобы просто убрать белый цвет из специальных ячеек, когда вы наводите курсор мыши на строку таблицы? (Не проверено - только 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 - не прочитал полный вопрос - удачи с этим!

0 голосов
/ 11 февраля 2010

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

table.status td.down, table.status td.down:hover
{
    background-color: #D22;
    color:            white;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...