Asp.net 悬停时更改表格行样式

我创建了一个无边框的表格样式，我希望它在悬停时的一行下划线。然而，我的行为越来越古怪。当我把鼠标从上到下移动过来时，什么也没发生。在相反的方向上，所有被触摸的行都会有下划线，并一直保持这种状态，直到我将鼠标移到另一个方向。我对此感到很困惑。为了简单起见，我不想使用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>

以及故障部分：

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

---

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

尝试使用JavaScriptonmouseover和onmouseout事件。在此事件中，只需应用和取消应用您的css类。

尝试使用JavaScriptonmouseover和onmouseout事件。在此事件中，只需应用和取消应用您的css类。

这看起来像是chrome中的一个bug。它在Firefox上运行良好，而在IE中完全不起作用。
（IE不支持

：悬停

，

边框间距

，折叠的

边框，它不停地运行…）

不过，我发现了一个简单的Chrome解决方案-只需为所有

添加一个底部边框：

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

---

这也将防止您的行改变高度和抖动。

这看起来像是chrome中的一个bug。它在Firefox上运行良好，而在IE中完全不起作用。
（IE不支持

：悬停

，

边框间距

，折叠的

边框，它不停地运行…）

不过，我发现了一个简单的Chrome解决方案-只需为所有

添加一个底部边框：

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

---

这也将防止行改变高度和抖动。

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

好的，将：hover伪选择器应用于“tr”的方式似乎有一个错误。将选择器更改为“#摘要td:hover{}”。它应该能用。

我知道这很旧，但它出现在我的谷歌搜索中。浏览器对tr样式的支持充其量只是可怜而已。您的样式需要在tds上，如：

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

---

我知道这很古老，但它出现在我的谷歌搜索中。浏览器对tr样式的支持充其量只是可怜而已。您的样式需要在tds上，如：

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

---

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

这是非常关键的，当你有一个大表，铬滞后非常严重

---

另外，我强烈建议在悬停前在TDs上设置一个相同宽度的边框，并且只需与BG颜色匹配，这样的垂直移动非常可怕。我尝试将TDs内部的填充减少1px以考虑边框，但结果有些奇怪（这也是讨厌表格的另一个原因）

需要添加一个注释，这似乎并不太广为人知，与其他浏览器测试不同，chrome在tr:hover上应用样式时会重新绘制整个表格。这可能已在较新版本的chrome中修复

这是非常关键的，当你有一个大表，铬滞后非常严重

---

另外，我强烈建议在悬停前在TDs上设置一个相同宽度的边框，并且只需与BG颜色匹配，这样的垂直移动非常可怕。我尝试将TDs内部的填充减少1px以考虑边界，但结果有些奇怪（这是讨厌表的另一个原因）

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

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

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

JavaScript:

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

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

$（函数（）{
$（文件）({
鼠标指针：函数（）{
$（this.addClass（'hovercs'）；
},
mouseleave:function（）{
$（this.removeClass（'hovercs'）；
}
}"tbody tr",；
});
.hovercs{
光标：指针；
背景色：#70C9C4；
}

td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
名称
城市
国家
Vipin Yadav
法兰克福
德国
拉梅什
张锦松
墨西哥
里提卡
墨尔本
奥地利
这是使用JQuery更改行样式（您应该定义css）定义脚本的方法。
CSS:

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

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

JavaScript:

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

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


$（函数（）{
$（文件）({
鼠标指针：函数（）{
$（this.addClass（'hovercs'）；
},
mouseleave:function（）{
$（this.removeClass（'hovercs'）；
}
}"tbody tr",；
});
.hovercs{
光标：指针；
背景色：#70C9C4；
}

td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
名称
城市
国家
Vipin Yadav
法兰克福
德国
拉梅什
张锦松
墨西哥
里提卡
墨尔本
奥地利
关于这个bug，您似乎是对的。Opera如前所述工作，Firefox根本不工作，Chrome稍好一点，但仍然是错误的，IE是一场彻底的灾难。不幸的是，我希望页面有点动态。。但是那工作。。除了IE，我已经用新的底部边框对它进行了测试，它似乎在FF和Chrome上运行良好。奇怪，它对你不起作用。。。也许你在betas？看来你对这个错误的看法是对的。Opera如前所述工作，Firefox根本不工作，Chrome稍好一点，但仍然是错误的，IE是一场彻底的灾难。不幸的是，我希望页面有点动态。。但是那工作。。除了IE，我已经用新的底部边框对它进行了测试，它似乎在FF和Chrome上运行良好。奇怪，它对你不起作用。。。也许你是