MVC项目中HTML表格行鼠标悬停样式不生效的求助

• 排查样式覆盖与优先级
  你的CSS选择器tbody tr:hover优先级可能较低，被项目中其他样式（如Bootstrap表格样式）覆盖。可以通过以下方式调整：

  1. 给目标表格添加自定义类，例如<table class="custom-data-grid">
  2. 修改CSS选择器提升优先级：

  .custom-data-grid tbody tr:hover {
      cursor: pointer;
      background-color: grey;
      color: blue;
  }
  

  也可以临时添加!important快速验证是否被覆盖（确认生效后建议移除，改用更具体的选择器）：

  tbody tr:hover {
      cursor: pointer;
      background-color: grey !important;
      color: blue !important;
  }
  

• 调整样式引用顺序
  当前你先渲染了~/Content/css捆绑包，再引用单独的Site.css。若捆绑包中已包含Site.css或存在冲突样式，会导致你的自定义样式被覆盖。可以将Site.css引用移到捆绑包之前：

  <head>
      <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
      @System.Web.Optimization.Styles.Render("~/Content/css")
      @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
  </head>
  

  同时打开浏览器F12开发者工具，在Elements面板查看tr元素的Styles标签，确认你的hover样式是否被划掉（划掉则说明被覆盖）。

• 验证样式文件加载状态
  在开发者工具的Network面板中刷新页面，检查Site.css的加载状态：

  • 若显示404，说明路径错误，需确认消费项目的Content文件夹下确实存在Site.css，且路径拼写无大小写错误（IIS环境下路径区分大小写）
  • 若未加载，检查捆绑包配置是否将Site.css包含在内，导致单独引用失效

• 清除浏览器缓存
  浏览器可能缓存了旧版本的样式文件，按Ctrl+F5强制刷新页面，或在开发者工具中勾选「禁用缓存」后重新加载。

• 检查表格结构完整性
  确保表格正确嵌套了<tbody>标签，若视图中直接将<tr>放在<table>下未包裹<tbody>，则tbody tr:hover选择器无法匹配目标元素。页面源码应符合如下结构：

  <table>
      <tbody>
          <tr>...</tr>
          <!-- 其他数据行 -->
      </tbody>
  </table>
  

内容的提问来源于stack exchange，提问作者Sam