悬停时更改表格行样式答案

【问题标题】：change table row style on hover悬停时更改表格行样式
【发布时间】：2017-11-08 15:20:26
【问题描述】：

我创建了一个没有边框样式的表格，我希望它在悬停时为一行下划线。但是，我的行为很奇怪。当我将鼠标从倒置移动时，什么也没有发生。在相反的方向上，所有触摸的行都加下划线并保持这种状态，直到我将鼠标移到其他方向。我对此感到很困惑。为了简单起见，我想远离 jquery，但是使用 jquery 我得到了相同的结果。这是代码..

<div class="information" >
    <table id="summary" >
    <%
        foreach (KeyValuePair<long, float> pair in sums)
        { %>
            <tr>
                <td class="left" >Automat id: <%= pair.Key%></td>
                <td class="right" ><%= pair.Value%></td>
            </tr>
     <% } %>
    </table>
</div>

以及应用于这个 div 的 css：

table
{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    margin-top:.5em;
}

div.information
{
    margin:1em 0;
    padding:1em;
    font-weight:bold;
    text-align: center;
    color:#C80;
    background-color:#FF9;
    border:1px solid #C80;
}

#summary
{
    width: 715px;
    margin-bottom: 5px;
}

.left
{
    text-align: left;
}

.right
{
    text-align: right;
}

还有缺陷部分：

#summary tr:hover
{
    border-bottom: dotted 1px gray;
}

有人看到错误吗？另一种方式？很抱歉发了这么长的帖子。

【问题讨论】：

标签： asp.net asp.net-mvc css

【解决方案1】：

我知道这是旧的，但它出现在我的 Google 搜索中。浏览器对样式 tr 的支持充其量是可悲的。您的样式需要在 tds 上，例如：

#summary tr:hover td {
  border-bottom:solid 1px #FF9;
}

【讨论】：

【解决方案2】：

尝试使用 JavaScript onmouseover 和 onmouseout 事件。在这种情况下，只需应用和取消应用您的 css 类。

【讨论】：

代替颜色...只需创建两个 JS 函数，并在 onmouseover/out 事件中调用它们。在 JS cals 中......你只是说..style = text-decoration:none;

【解决方案3】：

这看起来像是 chrome 中的错误。它在 Firefox 上运行良好，而在 IE 中则完全不行。
（IE 不支持:hover、border-spacing、折叠的<tr>s 的边框，它一直在……）

我找到了一个简单的 Chrome 解决方法，但是 - 只需为所有 <tr>s 添加一个底部边框：

#summary tr {
  border-bottom:solid 1px #FF9;
}

这也将防止你的行改变高度和摇晃。

【讨论】：

看来你对这个错误是正确的。 Opera 和描述的一样工作，Firefox 根本不工作，Chrome 稍微好一点，但仍然是错误的，IE 完全是灾难。不幸的是，我希望页面有点动态.. 但那工作.. 除了 IE。
我已经用新的底部边框对其进行了测试，它似乎在 FF 和 Chrome 上运行良好。奇怪的是它不适合你......也许你正在测试？

【解决方案4】：

好的，:hover 伪选择器应用于“tr”的方式似乎存在错误。将选择器更改为“#summary td:hover {}”。它应该可以工作。

【讨论】：

嗯，是的，确实如此，但它没有在整行下划线，而是在其中的一半下划线。
两半的一半？ - 如果是这种情况，请声明 padding:0
如果我在一个单元格下划线，而一行有两个单元格，则整行都不会下划线。只有一半。
你也可以试试#summary tr:hover td，但是后来线断了（两行两格），Chrome 还是抽搐。

【解决方案5】：

要补充一点，这似乎并不广为人知，与所有其他经过测试的浏览器不同，chrome 在 tr:hover 上应用样式时会重绘整个表。这可能已在较新版本的 chrome 中得到修复

当您有一张大桌子时，这一点非常关键，chrome 滞后非常严重。

另外，我强烈建议在悬停之前在 TD 上设置相同宽度的边框，并简单地匹配 BG 颜色，这样的垂直移动是可怕的用户体验。我尝试将 TD 内的填充减少 1px 以解决边界问题，但结果有些奇怪（这是讨厌表格的另一个原因）

【讨论】：

【解决方案6】：

这是使用 JQuery 定义脚本以更改行样式的方法（您应该定义您的 css）。 CSS：

.hovercs {
cursor: pointer;
background-color: #70C9C4;
}

JavaScript：

 $(function () {
        $(document).on({
            mouseenter: function () {
                $(this).addClass('hovercs');
            },
            mouseleave: function () {
                $(this).removeClass('hovercs');
            }
        }, 'tbody tr');
    });

$(function () {
            $(document).on({
                mouseenter: function () {
                    $(this).addClass('hovercs');
                },
                mouseleave: function () {
                    $(this).removeClass('hovercs');
                }
            }, 'tbody tr');
        });

.hovercs {
    cursor: pointer;
    background-color: #70C9C4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}


</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Vipin Yadav</td>
    <td>Frankfrut</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Ramesh</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Reetika</td>
    <td>Melbourne</td>
    <td>Austria</td>
  </tr>



</table>

</body>
</html>

 $(function () {
        $(document).on({
            mouseenter: function () {
                $(this).addClass('hovercs');
            },
            mouseleave: function () {
                $(this).removeClass('hovercs');
            }
        }, 'tbody tr');
    });

【讨论】：