Question

如何添加悬停样式以突出显示光标所在的行以及另一个悬停类以突出显示光标所在的特定单元格（差异颜色等）？

HTML

<table>
 <tr>
<td> </td>
<td> </td>
</tr>
</table>

CSS

    tr:hover td {bg-color:; color:;} /** Highlights row**/

Answer 1

你需要类似的东西。

tr:hover {background-color:#000; color:#ff0000;} <!-- row hover
tr td:hover {background-color:#CCC; color:#fff;}  <!-- individual cell hover

Answer 2

改为使用

$(document).ready(function(){
    $("img").fadeOut("fast");
    $(".buttons1").fadeOut("fast");

    $("a").on("click", function(){
        $("img").fadeIn(2000);
    })

    $("a").on("click", function(){
        $(".buttons1").fadeIn(2000);
    })

    });

Answer 3

如果要为特定行着色，而不是给出类名，并将鼠标悬停在该类上时更改颜色

HTML

<table border=1>
  <tr class="first">
     <td> some value</td>
     <td>some value </td>
  </tr>
  <tr class="second">
     <td>some value </td>
     <td>some value </td>
  </tr>
  <tr class="second">
     <td>some value </td>
     <td>some value </td>
  </tr>
</table>

CSS

.first:hover {
   color: red; 
 }

尝试运行此代码。当您将鼠标悬停在第一行上时，它将更改第一行的颜色。

CSS悬停整行以及单个单元格

3 个答案: