Why an inline style for an element cancels a `:hover` for the same?

Question

I know if I set an inline style for example for the color, it cancels style about color in the style tag or a CSS file (to reason the priority order). But why does it cancel setting a color for :hover for the same element? While it is for the hover case and not for a normal color.

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow;
}

<a href="/" style="color: tomato">Home</a>

And how to fix that? Only with this answer? (Setting :hover in anchor tag?)

Inline style to act as :hover in CSS

Thanks for guids:)

Answer 1

You are right the but if need to make the color change while hovering the text you must do like this(just Added The Important Tag):

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>