按钮元素Hover效果不生效，请求可行修复方案

Hey Erica, I spotted the quick fix for your non-working hover effect right away! Let's break it down:

The Root Problem #

Your base button styles use the element selector button, but your hover state is targeting a class selector .button:hover. If your HTML <button> tag doesn't have a class="button" attribute, that hover style will never apply to it. Also, your background-color value in the hover rule was truncated (you had lig...), so I'll assume you meant something like lightblue for the example fixes below.

Solution 1: Match Selectors (Quickest Fix) #

Update your hover selector to use the same element selector as your base styles. Here's the corrected CSS:

button {
  min-width: 20vw;
  max-width: 40vw;
  border: none;
  color: white;
  font-size: 1.5vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  background-color: blue;
  border-radius: 20px;
  transition: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Changed .button:hover to button:hover to match the base selector */
button:hover {
  color: black;
  background-color: lightblue;
}

Solution 2: Use a Class for More Flexibility #

If you want to apply these styles only to specific buttons (not all <button> elements on your page), add a class to your HTML button and adjust your CSS to target that class:

HTML:

<button class="custom-button">Your Button Text</button>

CSS:

.custom-button {
  min-width: 20vw;
  max-width: 40vw;
  border: none;
  color: white;
  font-size: 1.5vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  background-color: blue;
  border-radius: 20px;
  transition: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.custom-button:hover {
  color: black;
  background-color: lightblue;
}

Either approach will get your hover effect working smoothly. Just pick whichever fits your use case best!

内容的提问来源于stack exchange，提问作者Erica