我的按钮的背景颜色不适用于所有按钮

Question

最后一节“Cardio + Core”显示背景颜色为黑色，但其余部分则不是。我试着分开做，但也没有用。我假设这是我在某个地方犯的一个简单错误，特别是如果它适用于“Cardio + Core”按钮。最后我还给每个按钮分配了一个数字，例如：“btn1”、“btn2”等。有没有更简洁的方法来做到这一点？特别是因为我在页面上有更多按钮。

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7 {
    position: relative;
    background: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}

.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7:hover {
    background: white;
    color: #008000;
}

<section class="programs">
        <div class="heading">
            <h2>Programs</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?</p>
        </div>
        <div class="content">
            <div class="programsBx">
                <img src="images/workout (2).png" alt="">
                <h2>Online Training</h2>
                <p>Training sessions with --- facilitated online give you the consistent workouts you want, from the comfort and safety of your own home.</p>
                <a href="#" class="btn1">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/gymnast.png" alt="">
                <h2>Leg and Glute Toning</h2>
                <p>Muscle tone gives you the strength to back up what you are trying to achieve.

                    There is a big difference between looking slim and looking toned. ---- will design a plan for you to get more toned, and fully explain the workouts that will help you achieve a noticeable change in the next 12 weeks.</p>
                <a href="#" class="btn2">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/diet.png" alt="">
                <h2>Diet & Transformation</h2>
                <p>Achieve that slim body you always wanted with a 12-week personalized diet plan.

                   --- will tell you exactly what foods to eat and avoid, creating a personalized diet for you based on your specific physical and life conditions. Dexter will fully explain how to execute your meal plan, with quantities and times to eat.</p>
                <a href="#" class="btn3">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/sports-and-competition.png" alt="">
                <h2>Abs Transformation</h2>
                <p>15 day abs transformation: toning and sculpting mid-section & lower back.

                    This is not for beginners or people with excessive fat at their stomachs. Designed for the person who has been working hard at their abs and needs the last bit of definition they have been craving for: the lines and the super flat lower tummy, without the love handles.</p>
                <a href="#" class="btn4">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/goal.png" alt="">
                <h2>Achieve Your Dream</h2>
                <p>4 months to make your dream into YOUR achievement with personalized training from ---.

                    Begin the journey to achieve your dream today and find out just how great you can become. Get one-on-one support from --- to learn the mindset, training, nutrition, discipline and daily habits it takes as you progressively achieve your goal over the next 4 months.</p>
                <a href="#" class="btn5">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/food.png" alt="">
                <h2>Diet Plan Only</h2>
                <p>Perfect your physique in a specific time limit with a day diet plan from Richardo.

                    You’re already fit with an exercise routine that’s working, but your diet needs improvement. A custom daily mean plan for your body will be made, to perfect performance and aesthetics.</p>
                <a href="#" class="btn6">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/workout (1).png" alt="">
                <h2>Cardio + Core</h2>
                <p>Cardio and core training requires a pattern that truly challenges your body.

                    --- will provide you with a personalized AM/PM cardio and core training plan, fully explaining what you will do every day to execute. Get the right pattern of exercises from Dexter so you see and feel results in 12 weeks.</p>
                <a href="#" class="btn7">Enroll Here</a>
            </div>
        </div>
    </section>

Answer 1

您的 CSS 在 :hover 选择器上乱七八糟。使用这个：

.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover {
    background: white;
    color: #008000;
}

Answer 2

如果您不为每个按钮添加任何特定样式，您可以简单地对所有按钮使用 .btn class。

或者如果您想添加特定样式，则为每个按钮添加一些 class 名称。

使用 .btn class 为所有按钮添加通用样式。

使用 .btn1 class 为特定按钮添加样式。

如果你想给每个按钮添加不同的样式.btn1,.btn2,btn3...像这样你可以给所有按钮添加一个class名字

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.btn {
    position: relative;
    background: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}
.btn1{
  background-color:blue;
}
.btn:hover {
    background: white;
    color: #008000;
}

<section class="programs">
        <div class="heading">
            <h2>Programs</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?</p>
        </div>
        <div class="content">
            <div class="programsBx">
                <img src="images/workout (2).png" alt="">
                <h2>Online Training</h2>
                <p>Training sessions with --- facilitated online give you the consistent workouts you want, from the comfort and safety of your own home.</p>
                <a href="#" class="btn btn1">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/gymnast.png" alt="">
                <h2>Leg and Glute Toning</h2>
                <p>Muscle tone gives you the strength to back up what you are trying to achieve.

                    There is a big difference between looking slim and looking toned. ---- will design a plan for you to get more toned, and fully explain the workouts that will help you achieve a noticeable change in the next 12 weeks.</p>
                <a href="#" class="btn btn2">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/diet.png" alt="">
                <h2>Diet & Transformation</h2>
                <p>Achieve that slim body you always wanted with a 12-week personalized diet plan.

                   --- will tell you exactly what foods to eat and avoid, creating a personalized diet for you based on your specific physical and life conditions. Dexter will fully explain how to execute your meal plan, with quantities and times to eat.</p>
                <a href="#" class="btn btn3">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/sports-and-competition.png" alt="">
                <h2>Abs Transformation</h2>
                <p>15 day abs transformation: toning and sculpting mid-section & lower back.

                    This is not for beginners or people with excessive fat at their stomachs. Designed for the person who has been working hard at their abs and needs the last bit of definition they have been craving for: the lines and the super flat lower tummy, without the love handles.</p>
                <a href="#" class="btn btn4">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/goal.png" alt="">
                <h2>Achieve Your Dream</h2>
                <p>4 months to make your dream into YOUR achievement with personalized training from ---.

                    Begin the journey to achieve your dream today and find out just how great you can become. Get one-on-one support from --- to learn the mindset, training, nutrition, discipline and daily habits it takes as you progressively achieve your goal over the next 4 months.</p>
                <a href="#" class="btn btn5">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/food.png" alt="">
                <h2>Diet Plan Only</h2>
                <p>Perfect your physique in a specific time limit with a day diet plan from Richardo.

                    You’re already fit with an exercise routine that’s working, but your diet needs improvement. A custom daily mean plan for your body will be made, to perfect performance and aesthetics.</p>
                <a href="#" class="btn btn6">Enroll Here</a>
            </div>
            <div class="programsBx">
                <img src="images/workout (1).png" alt="">
                <h2>Cardio + Core</h2>
                <p>Cardio and core training requires a pattern that truly challenges your body.

                    --- will provide you with a personalized AM/PM cardio and core training plan, fully explaining what you will do every day to execute. Get the right pattern of exercises from Dexter so you see and feel results in 12 weeks.</p>
                <a href="#" class="btn btn7">Enroll Here</a>
            </div>
        </div>
    </section>

Answer 3

您可以对按钮使用单个 .btn class 并通过父级 class 管理它们的悬停状态。

body {
  margin:0;
  padding:0;
  font-family: sans-serif;
}
.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    color: #008000;
}

.heading h2 {
    font-weight: 600;
    font-size: 30px;
    color: #008000;
    margin:0;
    padding: 10px 0;
}

.content {
    display: flex;
    justify-content: space-between;
}

.contentBx {
    padding-right: 30px;
}

.contentBx h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.w50 {
    min-width: 50%;
}

img {
    max-width: 100%;
}

.programs {
    background: black;
}

.heading {
    color: white;
}

.programs .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.programs .content .programsBx {
    padding: 40px 20px;
    background: white;
    color: #008000;
    max-width: 340px;
    margin: 20px;
    text-align: center;
    transition: .5s;
}

.programs .content .programsBx:hover {
    background: #008000;
    color: black;
}

.programs .content .programsBx h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}


.programsBx .btn {
    position: relative;
    background-color: black;
    display: inline-block;
    color: #ffffff;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 20px;
}

.programsBx:hover .btn {
    background: white;
    color: #008000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <section class="programs">
      <div class="heading">
        <h2>Programs</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vitae?
        </p>
      </div>
      <div class="content">
        <div class="programsBx">
          <img src="images/workout (2).png" alt="" />
          <h2>Online Training</h2>
          <p>
            Training sessions with --- facilitated online give you the
            consistent workouts you want, from the comfort and safety of your
            own home.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/gymnast.png" alt="" />
          <h2>Leg and Glute Toning</h2>
          <p>
            Muscle tone gives you the strength to back up what you are trying to
            achieve. There is a big difference between looking slim and looking
            toned. ---- will design a plan for you to get more toned, and fully
            explain the workouts that will help you achieve a noticeable change
            in the next 12 weeks.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/diet.png" alt="" />
          <h2>Diet & Transformation</h2>
          <p>
            Achieve that slim body you always wanted with a 12-week personalized
            diet plan. --- will tell you exactly what foods to eat and avoid,
            creating a personalized diet for you based on your specific physical
            and life conditions. Dexter will fully explain how to execute your
            meal plan, with quantities and times to eat.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/sports-and-competition.png" alt="" />
          <h2>Abs Transformation</h2>
          <p>
            15 day abs transformation: toning and sculpting mid-section & lower
            back. This is not for beginners or people with excessive fat at
            their stomachs. Designed for the person who has been working hard at
            their abs and needs the last bit of definition they have been
            craving for: the lines and the super flat lower tummy, without the
            love handles.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/goal.png" alt="" />
          <h2>Achieve Your Dream</h2>
          <p>
            4 months to make your dream into YOUR achievement with personalized
            training from ---. Begin the journey to achieve your dream today and
            find out just how great you can become. Get one-on-one support from
            --- to learn the mindset, training, nutrition, discipline and daily
            habits it takes as you progressively achieve your goal over the next
            4 months.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/food.png" alt="" />
          <h2>Diet Plan Only</h2>
          <p>
            Perfect your physique in a specific time limit with a day diet plan
            from Richardo. You’re already fit with an exercise routine that’s
            working, but your diet needs improvement. A custom daily mean plan
            for your body will be made, to perfect performance and aesthetics.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
        <div class="programsBx">
          <img src="images/workout (1).png" alt="" />
          <h2>Cardio + Core</h2>
          <p>
            Cardio and core training requires a pattern that truly challenges
            your body. --- will provide you with a personalized AM/PM cardio and
            core training plan, fully explaining what you will do every day to
            execute. Get the right pattern of exercises from Dexter so you see
            and feel results in 12 weeks.
          </p>
          <a href="#" class="btn">Enroll Here</a>
        </div>
      </div>
    </section>
  </body>
</html>

我的按钮的背景颜色不适用于所有按钮

Background color for my button doesn't work for all buttons

html

css

hover

responsive-design