Untitled

dabblet.css

td
{
	width: 20px;
	height: 20px;
	background-color: red;
}

td.selected
{
	background-color: blue;
}

td:hover:not(.selected) ~td:not(.selected), td:hover:not(.selected),  tr:hover ~tr > td:not(.selected)
{
	background-color: green;
}

td:hover ~ td.selected ~ td, tr:hover ~ tr td.selected ~ td, tr.selected:hover ~ tr > td, tr:hover ~ tr.selected ~ tr > td
{
	background-color: red !important;
}

tbody:hover > tr.selected ~ tr > td, tbody:hover > tr.selected > td.selected:not(:hover) ~ td
{
	background-color: green;
}

tr.selected ~ tr:hover ~ tr > td, td.selected ~ td:hover ~ td, tr.selected ~ tr:hover > td:hover ~ td
{
	background-color: red !important;
}

dabblet.html

<table>
<tbody>
<tr>
  <td></td><td></td><td></td>
  <td></td><td></td><td></td>
  <td></td>
</tr>
<tr>
  <td></td><td></td><td></td>
  <td></td><td></td><td></td>
  <td></td>
</tr>
<tr class='selected'>
  <td></td><td></td><td></td>
  <td class='selected'></td><td></td><td></td>
  <td></td>
</tr>
<tr>
  <td></td><td></td><td></td>
  <td></td><td></td><td></td>
  <td></td>
</tr>
<tr>
  <td></td><td></td><td></td>
  <td></td><td></td><td></td>
  <td></td>
</tr>
</tbody>
</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}