CSS: наведите указатель мыши на пустые ячейки: пустой Селектор

У меня есть таблица, и я хочу навести каждую вторую ячейку или лучше сказать каждую ячейку с контентом. Я хочу для пустых ячеек .table_pascals_triangle td:empty эффект наведения отключен.CSS: наведите указатель мыши на пустые ячейки: пустой Селектор

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

.table_pascals_triangle 
 
{empty-cells:hide; 
 
} 
 
.table_pascals_triangle tr.even:hover td:nth-of-type(even){ 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle td:empty { 
 
    background: white; 
 
/* this cells shouldn't use the :hover Selector */ 
 
}

<table class="table_pascals_triangle"> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>2</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">3</td> 
 
    <td></td> 
 
    <td class="tetraeder">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
</table>

источник

2016-10-06 Grischa

Try 'фон: белый важный;' –

последний селектор просто есть! более низкую специфичность, чем те, что указаны выше, поэтому она игнорируется. –

@RobinKnaapen отлично, он работает. Не могли бы вы объяснить, почему он не работал на моем сайте, но здесь без проблем, даже без ': empty' Selector в коде css, он работал на jsfiddle. – Grischa

Хитрость заключается в том, чтобы добавить к :not(:empty) селекторов, которые делают зависание, так что вам не нужно будет новый селектор потом, что отменяет действие первого.

Проблема была одна из особенностей: самый нижний селектор не был достаточно сильным, чтобы переопределить вышеупомянутые.

.table_pascals_triangle 
 
{empty-cells:hide; 
 
} 
 
.table_pascals_triangle tr.even:hover td:nth-of-type(even):not(:empty) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
} 
 
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd):not(:empty) { 
 
    color:black; 
 
    background: #E0E0E0; 
 
}

<table class="table_pascals_triangle"> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="odd"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>2</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="even"> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td></td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td class="dreieckzahl">3</td> 
 
    <td></td> 
 
    <td class="tetraeder">1</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
</table>

источник

2016-10-06 06:24:12

Вы можете использовать

background:white!important;

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

td:hover td:not(:empty)

Я думаю, что второй вариант выглядит лучше, но то до вас

источник

2016-10-06 06:24:52

CSS: наведите указатель мыши на пустые ячейки: пустой Селектор

ответ

Смежные вопросы