CSS internal style cannot modify CSS set in line

<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><style>div.test{width:100px;Border:1px solid Black;White-space:nowrap;Overflow:Hidden;}Div.test:hover{Text-overflow:Inherit;Overflow:Visible;Color:Green;}</style></Head><Body>    <Divclass= "Test"style= "Text-overflow:ellipsis;color:red">SDFSDFSD fsadfasssss dfasd FDSFA SDFDSF</Div>    <BR/>    <Divclass= "Test"style= "Text-overflow:clip;">SDFSDFSD fsadfasssss dfasd FDSFA SDFDSF</Div></Body></HTML>

The first div text is red, when the mouse above, will not turn green, because the line of CSS priority, you can use JS to modify.

CSS internal style cannot modify CSS set in line