Color of the text not changing when hovering over a button-CodePudding

I am new to CSS, and I am trying to implement a button, which will have its text and background colors changed when hovering over it. While the change of the background color is working, it is not the case for the text. Could you please let me know what I am doing wrong? Thanks in advance!

HTML

button {
  background: none;
  border-radius: 5px;
  border: 1.5px solid #4ca37f;
  color: #4ca37f;
  padding: 1px 6px;
  cursor: pointer;
}

.button:hover {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

<div >
  <button type="button">Follow</button>
</div>

CodePudding user response：

apply style to button tag button:hover instead of .button:hover

button {
  background: none;
  border-radius: 5px;
  border: 1.5px solid #4ca37f;
  color: #4ca37f;
  padding: 1px 6px;
  cursor: pointer;
}

button:hover {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

<div >
  <button type="button">Follow</button>
</div>

CodePudding user response：

Your second CSS rule, .button:hover essentially targets the .button class. If I'm understanding you correctly, you would like the background-color and color of the actual button to be changed when you hover over the div. This means you have to target the button inside .button, such as:

.button:hover button {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}