Question: Is there a way using `CSS3` or `javascript` to highlight a table row containing 2 elements where each table element is highlighted a different background color upon hovering over that row?

So for example you have a table row with two values like 

```
1.45 | 2.56

```

and the table element containing `1.45` would have a blue background and element containing `2.56` would be red. 

At the moment I have it so it changes the background color for the entire row like so:

```
.graph-table tbody > tr:hover {
    background-color: #6ab1b0;
}

```

Answer: 
Use [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-ch) selector, like this:

```css
td {
  padding: 15px;
}
tr:hover td {
  background-color: red;
  color: white;
  cursor:pointer;
}
tr:hover td:nth-child(1) {
  background-color: blue;
}
```

```html
<table>
  <tr>
    <td>2.00</td>
    <td>3.45</td>
  </tr>
</table>
```
you can use `:nth-of-type()` like so:

```
tr td:nth-of-type(1):hover{
   background: red; 
}

tr td:nth-of-type(2):hover{
   background: blue;
}

```

[**EXAMPLE 1**](http://jsfiddle.net/wetLy72h/1/)

And by targeting the `td` as a descendant of `tr` you can assure that it works on multiple rows:

[**EXAMPLE 2**](http://jsfiddle.net/wetLy72h/2/)