Can hover selector be a class or id?

HTML-CSS
1

I`ve tried to use a class as a hover selector in my own project, and it worked.

However, in the sample project of ‘Building a landing page’ (https://codepen.io/freeCodeCamp/full/RKRbwL).

Why can`t I replace the code of

#hero input[type="submit"]:hover {
  background-color: orange;
  transition: background-color 1s;
}

and

.product > button:hover {
  background-color: orange;
  transition: background-color 1s;
}

to

.btn:hover {
  background-color: orange;
  transition: background-color 1s;
}

?
Both ‘input[type=“submit”]’ and ‘button’ mentioned above have the same class of ‘btn’.

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums