不能 :hover 整行表格

Posted 2023-03-06

【中文标题】不能 :hover 整行表格

【英文标题】：Can't :hover whole line of a table

【发布时间】：2011-07-14 06:45:56

【问题描述】：

当我将鼠标移到表格的一个单元格上时，我想突出显示整行！但是，我可以使用代码仅突出显示一个单元格！这是我的桌子：

<table id="myTable" class="tablesorter"> 
    <thead> 
        <tr> 
            <th>Title1</th> 
            <th>Title2</th> 
            <th>Title3</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr> 
            <td>Bach</td> 
            <td>42526</td> 
            <td>Dec 10, 2002 5:14 AM</td> 
        </tr> 
        <tr> 
            <td>Doe</td> 
            <td>243155</td> 
            <td>Jan 18, 2007 9:12 AM</td> 
        </tr> 
        <tr> 
            <td>Conway</td> 
            <td>35263</td>
            <td>Jan 18, 2001 9:12 AM</td> 
        </tr> 
    </tbody> 
</table>

css 是

   /*Table sort*/
table.tablesorter 
    font-family:arial;
    background-color: #e6EEEE;
    font-size: 8pt;
    width: 100%;
    text-align: left;

table.tablesorter thead tr th, table.tablesorter tfoot tr th 
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;

table.tablesorter thead tr .header 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;

table.tablesorter tbody td 
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;

table.tablesorter tbody tr.odd td 
    background-color:#F0F0F6;

table.tablesorter thead tr .headerSortUp 

table.tablesorter thead tr .headerSortDown 

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp 
    /*background-color: #8dbdd8;*/
    background-color: #e6EEEE;

table.tablesorter tbody tr :hover 
    background: #8dbdd8;

我的 CSS 中缺少什么来突出显示整行？

【参考方案1】：

您只需在选择器中删除一个空格：

table.tablesorter tbody tr:hover
                       /* ^ space was removed */

---

因为您留下评论说“它不起作用”：

看这里，它的工作原理：http://jsfiddle.net/thirtydot/Pe6Xe/

---

根据您的编辑，这将起作用：

table.tablesorter tbody tr:hover td 
    background: #8dbdd8;

问题是tds 上的background-color 覆盖了tr 悬停时更改的background-color。

见：http://jsfiddle.net/thirtydot/Pe6Xe/1/

【讨论】：

不工作...没有空格会停止突出显示甚至一个单元格

但是您同意它在我的 jsFiddle 演示中有效吗？这一事实意味着您在原始问题中遗漏了一些重要信息。

是的......我看到它在那里工作......但是另一个与表格排序相关的 CSS 代码。这可能会影响：悬停？

是的，一定有其他因素影响它。这里涉及到任何 javascript 吗？需要更多信息来解决这个问题。链接到实时页面将是最快的方式。如果这不是一个选项，您可以尝试显示整个 CSS。

我发现使用 chrome 开发人员工具（或 firefox 中的 firebug）查看元素应用了哪些样式确实有助于快速找出这类情况。

【参考方案2】：

您需要删除 tr 和 :hover 之间的空格。如，改变这个：

tr :hover

到：

tr:hover

【讨论】：

您针对哪些浏览器？它在 webkit/FF 中工作：jsfiddle.net/PugsZ

是的，我的示例在 Chrome 中工作。您是否尝试过我发布的链接？

是的，我做到了.. 它在那里工作。我会尝试在那里发布我所有的 css 代码。谢谢你的链接

尝试从 td 类中移除背景颜色