html - 如何突出显示表格中的选定行？

Question

这是我的表格..我应该添加什么来让选定的行突出显示？ 这样可以更清楚地看到我的鼠标在哪里...................................... .....................

<style type ="text/css">
      table.imagetable {
          font-family: verdana,arial,sans-serif;
          font-size:15px;
          color:#333333;
          border-width: 1px;
          border-color: #999999;
          border-collapse: collapse;
          width:100%;
      }
      table.imagetable th {
          background:#b5cfd2 url('/static/cell-blue.jpg');
          border-width: 1px;
          padding: 12px;
          border-style: solid;
          border-color: #999999;
      }
      table.imagetable td {
          background:#dcddc0 url('/static/cell-grey.jpg');
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #999999;
      }
    </style>

    <table class="imagetable">
      <tr>
        <th>Time</th><th>Category</th><th>Filename</th>
      </tr>
        {% for (t,f,c,l, t2) in data %}
          <tr>
              <td style = "padding:3px;">{{date}} {{t2}}</td>
              <td sytle = "padding:3px;"><a href = "/report_category/{{c}}/">{{c}}</a></td>
              <!-- l is the relative location, we need absolute directory here.-->
              <td style = "padding:3px;"><a href = "/{{l}}">{{f}}</a></td>
           </tr>
        {% endfor %}
    </table>

Answer 1

在 css 文件中使用 :hover 属性(根据需要更改颜色):

table.imagetable tr:hover {
    background-color: #EBECCD;
}

table.imagetable tr {
    background-color: #dcddc0;
}

table.imagetable td {
    background:#dcddc0 url('/static/cell-grey.jpg'); // remove this line
    padding: 3px;
}

table.imagetable {
    width: 100%;
}

像这样清除你的模板:

<table class="imagetable">
  <thead>
    <tr>
      <th>Time</th><th>Category</th><th>Filename</th>
    </tr>
  </thead> 
  <tbody>
  {% for (t,f,c,l, t2) in data %}
    <tr>
      <td>{{date}} {{t2}}</td>
      <td><a href = "/report_category/{{c}}/">{{c}}</a></td>
      <td><a href = "/{{l}}">{{f}}</a></td>
     </tr>
  {% endfor %}
  </tbody>
</table>