如何解决我的按钮的背景色不适用于所有按钮
最后一节“ 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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。