how do I use the CSS hover on only SOME cells in a table?

问题

How do I use the CSS hover on only SOME cells in a table?
Can I turn it off on those that I don't want it applied to? I'm using this:

td:hover {
    border-style:dotted;
    border-color:#F60;
    border-width:medium;
    border-left-style:dotted;
    border-right-style:dotted;

}

But I need it to only apply to certain cells

回答1:

Instead of specifying your style for all cells you can create a class and only apply that to the cells you want the style on. Update your css to this:

.myclass:hover {
    border-style:dotted;
    border-color:#F60;
    border-width:medium;
    border-left-style:dotted;
    border-right-style:dotted;

}

Then you do something like this in the HTML code:

<table>
  <tr>
    <td class="myclass">Cell 1 with special hoover</td>
    <td>Cell 2</td>     
    <td>Cell 3</td>
  </tr>
</table>

回答2:

the <td> tag supports Global Attributes in HTML so you can simply add a class to your code for each of the table cells you want to have the hover on.

...
<td class="cell-hover">Table Cell Data</td>
...

The modify your CSS Selector to include the selection of only td cells that have the "cell-hover" class.

td:hover {
   border-style:dotted;
   border-color:#F60;
   border-width:medium;
   border-left-style:dotted;
   border-right-style:dotted;
}

By using a . within CSS you can select only the elements that have the proceeding class name

来源：https://stackoverflow.com/questions/35585179/how-do-i-use-the-css-hover-on-only-some-cells-in-a-table