When the mouse is hovering over a table row, how can I change both the row’s background color and the fill color of a corresponding SVG path?

My webpage dynamically generates a table with table rows of the class tableTr and contains a SVG image within the HTML code with paths of the class pathClass.

Using JavaScript, upon hovering the mouse over a table row, the background color of the row should change, as well as the fill color of the corresponding cell; both revert back to normal once the mouse is moved off the table row.

The paths should not change fill color when the mouse hovers over them; this does not work in reverse.

I am totally stumped about what approach to use.