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

编程问答 2022-08-16

问题描述

最后一节“ 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,.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>

解决方法

如果您没有为每个按钮添加任何特定样式，则可以对所有按钮使用tell application "app" set 1 to something repeat with some in 1 set refpdf to field "File Attachments" of record 1 on findAndReplaceInText(theText,theSearchString,theReplacementString) set AppleScript's text item delimiters to theSearchString set theTextItems to every text item of theText set AppleScript's text item delimiters to theReplacementString set theText to theTextItems as string set AppleScript's text item delimiters to "" return theText end findAndReplaceInText set refpdf1 to findAndReplaceInText(refpdf,"some","some2") set libh to findAndReplaceInText(libraryname,"test","test2") end repeat end tell 类。

或者如果您想添加特定的样式，请向每个按钮添加一些类名称。

使用.btn类向所有按钮添加通用样式。

使用.btn类为特定按钮添加样式。

如果要为每个按钮.btn1，.btn2，btn3 ...添加不同的样式，则可以为所有按钮添加类名

.btn1
.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;
}

,

您可以将单个.btn类用于按钮，并通过其父类管理其悬停状态。 

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>

,

您的CSS在:hover选择器上混乱了。使用这个：

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

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...