medium.cool medium.cool - 1 month ago 6
CSS Question

How can I add a border to all the elements that share a class when the mouse has hovered over one of them?

Is it possible to change the border (or other style elements) of multiple table cells that all belong to class "xyz" by hovering over one, using only HTML and CSS?

I've got two dynamically generated tables. In this particular instance, one is 5 cells wide and 4 cells high, and the other table is 4 by 3.

There are:


  • 2 cells in the first table that belong to class "xyz";

  • 1 cell in the second table that belongs to class "xyz".



Table 1:

+----+----+----+----+----+
| |xyz | | | |
+----+----+----+----+----+
| | | | | |
+----+----+----+----+----+
| | | |xyz | |
+----+----+----+----+----+
| | | | | |
+----+----+----+----+----+


Table 2:

+----+----+----+----+
| | | |xyz |
+----+----+----+----+
| | | | |
+----+----+----+----+
| | | | |
+----+----+----+----+


What I can do is:


  • get all "xyz" cells formatted with a particular border;

  • get one "xyz" cell to update it's style on hover ( td.xyz:hover {...} ).



What I can't do is:


  • get all cells belonging to "xyz" to update their style when hovering over one.



Is it possible to do this using only HTML and CSS?

Answer

No, CSS only works with sibling or child elements. Table cells in the same row are adjacent siblings, but cells in other rows others are not. Therefore you need to use JavaScript to accomplish this.

Comments