悬停在 table.sorting_X 下无法正常工作
Hover is not working properly with table.sorting_X
我有一个 table 排序(单个和多个),我不知道为什么,悬停没有显示在 "sorted" 列。
我的代码:
tr.odd:hover
{
background-color: cyan;
}
tr.even:hover
{
background-color: cyan;
}
tr.odd>.sorting_1:hover, tbody tr.odd>.sorting_1:hover
{
background-color: cyan;
}
tr.even>.sorting_1:hover, tbody tr.even>.sorting_1:hover
{
background-color: cyan;
}
tr.odd>.sorting_2:hover, tbody tr.odd>.sorting_2:hover
{
background-color: cyan;
}
tr.even>.sorting_2:hover, tbody tr.even>.sorting_2:hover
{
background-color: cyan;
}
tr.odd>.sorting_3:hover, tbody tr.odd>.sorting_3:hover
{
background-color: cyan;
}
tr.even>.sorting_3:hover, tbody tr.even>.sorting_3:hover
{
background-color: cyan;
}
tr.odd
{
background-color: rgba(25, 119, 218, 0.26);
}
tr.odd>.sorting_1, tbody tr.odd>.sorting_1
{
background-color: #132030;
}
tr.even
{
background-color: rgba(16, 60, 106, 0.26);
}
tr.even>.sorting_1, tr.even>.sorting_1
{
background-color: #13304D;
}
(有点多余,因为我想尝试尽可能多的可能性)。
example http://puu.sh/l8Cho/15ac04c94e.png
但是如果我也像这样将鼠标悬停在已排序的列上,
example2 http://puu.sh/l8Coh/5bf36bf642.png
我也想悬停已排序的列,即使我不悬停它(我的意思是,当我将光标放在它上面时,我想悬停所有 tr)。
HTML代码
<tr role="row" class="odd">
<td class="match-number sorting_1"><a href="#25">1</a></td>
<td class="match-rank rank-4 sorting_3" title="Cobre">4</td>
<td class="match-clantag sorting_2">MiSCII</td>
<td class="match-race race-Z" title="Zerg">Z</td>
<td class="match-name">Eldoran</td>
<td class="match-map">Cabeza de puente</td>
<td class="match-length">00.15</td>
<td class="match-result-loss">
<span class="text-result">Derrota</span>
<span class="points">-5</span>
</td>
<td class="match-date sorting_3">2015-10-22 07:54:41</td>
</tr>
朋友帮我找到了路
http://www.datatables.net/forums/discussion/1936/highlight-row-with-column-sorting-enabled
你必须做一个简单的
,而不是所有那些:hover
tr.odd td.sorting_1:hover {
background-color: #ffff99;
}
tr.even td.sorting_1:hover {
background-color: #ffff99;
}
谢谢,希望对以后有帮助^^
我有一个 table 排序(单个和多个),我不知道为什么,悬停没有显示在 "sorted" 列。
我的代码:
tr.odd:hover
{
background-color: cyan;
}
tr.even:hover
{
background-color: cyan;
}
tr.odd>.sorting_1:hover, tbody tr.odd>.sorting_1:hover
{
background-color: cyan;
}
tr.even>.sorting_1:hover, tbody tr.even>.sorting_1:hover
{
background-color: cyan;
}
tr.odd>.sorting_2:hover, tbody tr.odd>.sorting_2:hover
{
background-color: cyan;
}
tr.even>.sorting_2:hover, tbody tr.even>.sorting_2:hover
{
background-color: cyan;
}
tr.odd>.sorting_3:hover, tbody tr.odd>.sorting_3:hover
{
background-color: cyan;
}
tr.even>.sorting_3:hover, tbody tr.even>.sorting_3:hover
{
background-color: cyan;
}
tr.odd
{
background-color: rgba(25, 119, 218, 0.26);
}
tr.odd>.sorting_1, tbody tr.odd>.sorting_1
{
background-color: #132030;
}
tr.even
{
background-color: rgba(16, 60, 106, 0.26);
}
tr.even>.sorting_1, tr.even>.sorting_1
{
background-color: #13304D;
}
(有点多余,因为我想尝试尽可能多的可能性)。
example http://puu.sh/l8Cho/15ac04c94e.png
但是如果我也像这样将鼠标悬停在已排序的列上,
example2 http://puu.sh/l8Coh/5bf36bf642.png
我也想悬停已排序的列,即使我不悬停它(我的意思是,当我将光标放在它上面时,我想悬停所有 tr)。
HTML代码
<tr role="row" class="odd">
<td class="match-number sorting_1"><a href="#25">1</a></td>
<td class="match-rank rank-4 sorting_3" title="Cobre">4</td>
<td class="match-clantag sorting_2">MiSCII</td>
<td class="match-race race-Z" title="Zerg">Z</td>
<td class="match-name">Eldoran</td>
<td class="match-map">Cabeza de puente</td>
<td class="match-length">00.15</td>
<td class="match-result-loss">
<span class="text-result">Derrota</span>
<span class="points">-5</span>
</td>
<td class="match-date sorting_3">2015-10-22 07:54:41</td>
</tr>
朋友帮我找到了路
http://www.datatables.net/forums/discussion/1936/highlight-row-with-column-sorting-enabled
你必须做一个简单的
,而不是所有那些:hovertr.odd td.sorting_1:hover {
background-color: #ffff99;
}
tr.even td.sorting_1:hover {
background-color: #ffff99;
}
谢谢,希望对以后有帮助^^