html - Hover effect on <hr> in table -

I have a & lt; Hr>, a table with a headline and a body text, I put the hover effect on the whole table, but & lt; For hr>, this color does not change, when the mouseover is on the table when the line is mouseover, as soon as the mouse touches the table like the rest, I need to change it in color. I tried many things but Nobody is doing any work.

How to change white color like the rest of the color on the mouseworld table anywhere on the table & lt; Hr> Can I get a line?

HTML:

& lt; Body & gt; & Lt; Table & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Td> & Lt; Hour / & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Td> & Lt; A href = "#" & gt; This header is & lt; / A & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td> & Lt; A href = "#" & gt; Some line content & lt; / A & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Body & gt;

CSS:

Hour {boundary: 1px solid; Swim left; Curry left; Width: 30%; Background color: # 991f33; Color: # 991f33; } Hour: hover {background color: #fff; Color: #fff; } Table {boundary: 0; Background color: #dcdcdc; Text-align: left; Text-decoration: None! Important; Padding: 20px; } Thead tr a {color: # 911f33; } TTR {font-size: 10px; Line-height: 19px; Color: # 911f33; } Table: hover, table: a {color: #fff; Background color: # 911f33; } Tr a {color: # 000; }

  & lt; Td> & Lt; Hour id = "hrr" /> & Lt; / TD & gt;  

is CSS

  table: hover #hrr {border: 1px solid blue; }