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

Solution 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><tdclass="myclass">Cell 1 with special hoover</td><td>Cell 2</td><td>Cell 3</td></tr></table>

Solution 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