对于我的代码按钮,它不允许按钮在移动到按钮上时将光标变成指针,并且一段时间后,我的悬停伪类选择器不再适用于该按钮。我使用 ChatGPT 来找出我可能出错的地方,它表明将按钮放在相对位置可能会破坏按钮的可访问性。
你能告诉我这段代码哪里可能出了问题吗?
.hero-btn {
/*
position: relative;
top: 200px;
left: 30px; */
margin-left: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: 'Open-Sans', sans-serif;
transition: .3s ease-in-out;
}
.blog-btn {
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}
<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>
首先使用输入元素,然后更改为按钮元素。按钮悬停一次,光标:指针;致力于检查可访问性。一段时间后,当尝试检查可访问性时,按钮开始不起作用,我尝试更改类属性,但失败了。我尝试更改位置或注释掉位置,但仍然不起作用。我还再次重新编写了代码,以确保它不是代码的拼写错误。
问题是由
yoga-section
元素覆盖按钮引起的,因此当您尝试单击按钮时,实际上是在单击 yoga-section
元素的碰撞框。
最简单的修复方法是对按钮应用正值
z-index
,使它们堆叠在 yoga-section
元素的顶部:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #33a112;
--secondary-color: #3acabb;
--complementary-color: #fff;
}
body {
min-height: 100vh;
background-color: var(--complementary-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-shadow: 0px 0px 5px 0px;
}
.logo {
font-size: 2rem;
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
}
.nav-link a {
position: relative;
font-size: 16px;
color: #000;
text-decoration: none;
font-weight: 250px;
margin-left: 15px;
font-family: 'Open-Sans', sans-serif;
}
.nav-link a::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: .3s;
}
.nav-link a:hover {
color: var(--secondary-color);
}
.nav-link a:hover::before {
width: 100%;
}
main#main-header {
margin-top: 5px;
margin-bottom: -775px;
padding: 10px 100px;
text-align: justify;
background-color: beige;
}
div.hero {
margin-left: 60px;
}
.hero h1 {
font-size: 9rem;
color: var(--secondary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
}
.hero h3 {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
margin-top: 7px;
margin-left: 30px;
}
.hero-h1, .hero-h3 {
position: relative;
top: 120px;
left: -80px;
text-align: justify;
}
img.hero-img {
width: 600px;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0px 0px 8px 0px;
margin-left: 215px;
}
.hero-disc {
position: absolute;
top: 735px;
left: 110px;
font-family: 'Open-Sans', sans-serif;
font-size: medium;
color: var(--secondary-color);
}
.food1 {
width: 520px;
position: relative;
top: -530px;
left: 700px;
z-index: 3;
}
.travel2 {
width: 550px;
position: relative;
top: -540px;
left: 1110px;
z-index: 2;
}
.yoga1 {
width: 600px;
position: relative;
top: -910px;
left: 549px;
z-index: 1;
}
.hero-btn {
position: relative;
z-index: 1;
top: 200px;
left: 30px;
margin-left: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: 'Open-Sans', sans-serif;
transition: .3s ease-in-out;
}
.blog-btn {
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}
hr {
background-color: #f3f3f3;
}
section.yoga-section {
height: 1275px;
margin-top: -2px ;
padding: 10px 100px 10px;
background-color: var(--secondary-color);
position: relative;
text-align: center;
border: #000 solid 2px;
border-radius: 10px;
}
div.yoga-container {
position: relative;
top: -600px;
left: -40px;
}
.yoga-img {
width: 1300px;
position: relative;
top: 650px;
left: -300px;
}
.h2-1 {
font-size: 6rem;
color: var(--complementary-color);
font-weight: 600;
font-family: 'Ubuntu', sans-serif;
text-align: right;
position: relative;
left: 50px;
top: -235px;
}
.h2-1 span{
color: var(--primary-color);
font-size: 8rem;
}
span.peace {
color: beige;
font-size: 8rem;
}
section#travel-section {
width: 100%;
height: 85vh;
margin-top: -100px;
background: linear-gradient(80deg, var(--primary-color), beige);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 50px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 65%;
}
}
article.travel-art-label {
height: 560px;
width: 500px;
border: 5px solid black;
display: inline-block;
position: relative;
top: 180px;
left: 210px;
border-radius: 15px;
box-shadow: 25px 25px 20px 0;
background-color: beige;
}
.flex {
width: 500px;
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: center;
}
.h2-trav {
font-size: 3rem;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
margin-left: 6px;
}
h2.places {
margin-right: 125px;
}
ul li {
width: 75%;
margin-bottom: 20px;
margin-top: 30px;
padding: 25px 20px;
list-style-type: none;
font-family: 'Open-Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
}
.travel-with, .travel-way {
margin-top: 5px;
margin-bottom: 22.5px;
}
.travel-need, .travel-supply {
margin-top: 47.5px;
}
.list {
margin-bottom: 45px;
}
li.travel-list {
margin-top: 25px;
margin-bottom: -25px;
}
.list-p {
font-size: 16px;
font-style: italic;
}
section#healthy-recipes {
width: 100%;
height: 50vh;
}
table {
margin-top: 2%;
margin-left: 2%;
}
h2#healthy-h2 {
font-family: 'Ubuntu', sans-serif;
font-size: 2.5em;
position: relative;
top: 15px;
left: 10px
}
.table-head, .table-data {
border: 2px solid #0a0a23;
padding: 10px 5px;
border-radius: 4px;
}
.table-head {
background-color: var(--secondary-color);
color: #fff;
font-weight: 700;
font-size: 1.2em;
box-shadow: 0 0 2px 0 black;
}
h3#healthy-h3 {
display: flex;
justify-content: flex-end;
margin-right: 100px;
margin-top: -250px;
font-family: 'open-sans', sans-serif;
font-size: 2rem;
}
footer {
background-color: black;
color: white;
margin-top: -100px;
}
ol.list {
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta description="design" />
<title>Sarah's Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--Begin Navigation-->
<header class="header">
<div class="nav-logo">
<a href="#" class="logo">Logo</a>
</div>
<div class="nav-link">
<a href="#home" class="primary">Home</a>
<a href="#yoga" class="secondary">Yoga</a>
<a href="#travel" class="primary">Travel</a>
<a href="#healthy" class="secondary">Healthy Recipes</a>
<a href="#contact" class="primary">Contact</a>
</div>
</header>
<!--End Navigation-->
<!--Begin Main-->
<main id="main-header">
<div class="hero">
<h1 class="hero-h1">
Travel,<br />
Thrive,<br />
Transform.
</h1>
<h3 class="hero-h3">
Experience the World through Travel,<br />
Embrace Wellness with Yoga,<br />
Discover Health with Wholesome Recipes.
</h3>
<p class="hero-disc">
Join our global community in uncovering a path to personal growth as
<br />
we embark on a journey to live a life of meaning and purpose together!
</p>
<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>
</div>
<!--Begin Hero Images-->
<div class="img-section">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/food1.jpg"
width="25%"
title="Healthy Food Lifestyle"
class="hero-img food1"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/travel2.jpg"
width="25%"
title="Traveling Lifestyle"
class="hero-img travel2"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga1.jpg"
width="25%"
title="Yoga Lifestyle"
class="hero-img yoga1"
/>
</div>
</main>
<!--End Hero Images-->
<hr />
<!--Begin Yoga Section -->
<section class="yoga-section">
<div class="yoga-container">
<img src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga-2.jpg" title="Yoga Lifestyle" class="yoga-img" />
<h2 class="h2-1">
Where<br />
The union of <br />
<span><em>Breath</em></span
>,<br />
<span><em>Body</em></span
>,<br />
and <span><em>Mind</em></span
>,<br />
Illuminates<br />
the path <br />
to inner <br /><span class="peace">Peace and Balance.</span><br />
</h2>
</div>
</section>
<!--End Yoga Section 1-->
<!--Begin Travel Section -->
<section id="travel-section">
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What's The Best Way To Travel?</h2>
<ul class="travel-way">
<li class="travel-supply">
Always carry essential documents like passports and visas.
<img src="" alt="" />
</li>
<li class="travel-supply">
Research local customs and traditions before travel
</li>
<li class="travel-supply">Keep an emergency contact list handy.</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What Do I Need To Travel With?</h2>
<ul class="travel-with">
<li class="travel-need">
Supported Travel Gear with New Luggage and fresh supplies and
everyday daily clothes for the new day
</li>
<li class="travel-need">
Come prepared with emergency funds for the rainy days
</li>
<li class="travel-need">Passports and Visas are always forsure</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav places">Where Should I Travel To Next?</h2>
<ul class="list">
<li class="travel-list">
<span class="trav-country">Paris, France;</span>
<p class="list-p">
Romantic streets, iconic museums, and exquisite cuisine, an
unforgettable story unfolds
</p>
</li>
<li class="travel-list">
<span class="trav-country">Tokyo, Japan;</span>
<p class="list-p">
Ancient traditions meet futuristic marvels, amidst a gastronomic
journey and a tapestry of diverse cultures, all within a city
pulsating with vibrant energy.
</p>
</li>
<li class="travel-list">
<span class="travel-country">Machu Picchu, Peru;</span>
<p class="list-p">
Ancient wonders amid stunning mountains, merging history,
breathtaking landscapes, and vibrant Peruvian culture.
</p>
</li>
</ul>
</div>
</article>
</section>
<!--End Travel Section -->
</body>
</html>
一个可以说更易于维护的修复方法是重新设计
position: relative
和 top/left
的无意义使用,转而使用更合理的 CSS 属性来更可预测地布局元素,这样就不会出现元素的起伏重叠。例如作为粗略的返工:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #33a112;
--secondary-color: #3acabb;
--complementary-color: #fff;
}
body {
min-height: 100vh;
background-color: var(--complementary-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-shadow: 0px 0px 5px 0px;
}
.logo {
font-size: 2rem;
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
font-family: "Ubuntu", sans-serif;
}
.nav-link a {
position: relative;
font-size: 16px;
color: #000;
text-decoration: none;
font-weight: 250px;
margin-left: 15px;
font-family: "Open-Sans", sans-serif;
}
.nav-link a::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: 0.3s;
}
.nav-link a:hover {
color: var(--secondary-color);
}
.nav-link a:hover::before {
width: 100%;
}
main#main-header {
display: flex;
margin-top: 5px;
padding: 130px 0 200px 130px;
text-align: justify;
background-color: beige;
width: 2000px;
}
.hero h1 {
font-size: 9rem;
color: var(--secondary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
margin-left: -30px;
}
.hero h3 {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
margin-top: 7px;
}
.hero-h1,
.hero-h3 {
text-align: justify;
}
img.hero-img {
border-radius: 10px;
box-shadow: 0px 0px 8px 0px;
}
.hero-disc {
margin-top: 20px;
font-family: "Open-Sans", sans-serif;
font-size: medium;
color: var(--secondary-color);
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.food1 {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
width: 520px;
}
.travel2 {
width: 600px;
margin-top: -20px;
margin-left: -40px;
}
.yoga1 {
width: 600px;
margin-top: 20px;
}
.hero-btn {
margin-top: 30px;
margin-left: 20px;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 25px;
font-family: "Open-Sans", sans-serif;
transition: 0.3s ease-in-out;
}
.blog-btn {
margin-left: 100px;
background-color: #000;
color: #fff;
}
.blog-btn:hover {
background-color: var(--secondary-color);
color: #fff;
}
.sub-btn {
background-color: #000;
color: #fff;
}
.sub-btn:hover {
background-color: var(--primary-color);
color: #fff;
}
hr {
background-color: #f3f3f3;
}
section.yoga-section {
height: 1275px;
margin-top: -2px;
padding: 10px 100px 10px;
background-color: var(--secondary-color);
position: relative;
text-align: center;
border: #000 solid 2px;
border-radius: 10px;
}
div.yoga-container {
display: flex;
align-items: center;
}
.yoga-img {
width: 1300px;
margin-left: -300px;
flex-shrink: 0;
}
.h2-1 {
margin-left: -700px;
font-size: 6rem;
color: var(--complementary-color);
font-weight: 600;
font-family: "Ubuntu", sans-serif;
text-align: right;
}
.h2-1 span {
color: var(--primary-color);
font-size: 8rem;
}
span.peace {
color: beige;
font-size: 8rem;
}
section#travel-section {
width: 100%;
height: 85vh;
margin-top: -100px;
background: linear-gradient(80deg, var(--primary-color), beige);
background-size: 400% 400%;
animation: gradient 8s ease-in-out infinite;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 50px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 65%;
}
}
article.travel-art-label {
height: 560px;
width: 500px;
border: 5px solid black;
display: inline-block;
position: relative;
top: 180px;
left: 210px;
border-radius: 15px;
box-shadow: 25px 25px 20px 0;
background-color: beige;
}
.flex {
width: 500px;
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: center;
}
.h2-trav {
font-size: 3rem;
font-family: "Ubuntu", sans-serif;
font-weight: 400;
margin-left: 6px;
}
h2.places {
margin-right: 125px;
}
ul li {
width: 75%;
margin-bottom: 20px;
margin-top: 30px;
padding: 25px 20px;
list-style-type: none;
font-family: "Open-Sans", sans-serif;
font-size: 1rem;
font-weight: 700;
}
.travel-with,
.travel-way {
margin-top: 5px;
margin-bottom: 22.5px;
}
.travel-need,
.travel-supply {
margin-top: 47.5px;
}
.list {
margin-bottom: 45px;
}
li.travel-list {
margin-top: 25px;
margin-bottom: -25px;
}
.list-p {
font-size: 16px;
font-style: italic;
}
section#healthy-recipes {
width: 100%;
height: 50vh;
}
table {
margin-top: 2%;
margin-left: 2%;
}
h2#healthy-h2 {
font-family: "Ubuntu", sans-serif;
font-size: 2.5em;
position: relative;
top: 15px;
left: 10px;
}
.table-head,
.table-data {
border: 2px solid #0a0a23;
padding: 10px 5px;
border-radius: 4px;
}
.table-head {
background-color: var(--secondary-color);
color: #fff;
font-weight: 700;
font-size: 1.2em;
box-shadow: 0 0 2px 0 black;
}
h3#healthy-h3 {
display: flex;
justify-content: flex-end;
margin-right: 100px;
margin-top: -250px;
font-family: "open-sans", sans-serif;
font-size: 2rem;
}
footer {
background-color: black;
color: white;
margin-top: -100px;
}
ol.list {
margin-bottom: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta description="design" />
<title>Sarah's Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--Begin Navigation-->
<header class="header">
<div class="nav-logo">
<a href="#" class="logo">Logo</a>
</div>
<div class="nav-link">
<a href="#home" class="primary">Home</a>
<a href="#yoga" class="secondary">Yoga</a>
<a href="#travel" class="primary">Travel</a>
<a href="#healthy" class="secondary">Healthy Recipes</a>
<a href="#contact" class="primary">Contact</a>
</div>
</header>
<!--End Navigation-->
<!--Begin Main-->
<main id="main-header">
<div class="hero">
<h1 class="hero-h1">
Travel,<br />
Thrive,<br />
Transform.
</h1>
<h3 class="hero-h3">
Experience the World through Travel,<br />
Embrace Wellness with Yoga,<br />
Discover Health with Wholesome Recipes.
</h3>
<p class="hero-disc">
Join our global community in uncovering a path to personal growth as
<br />
we embark on a journey to live a life of meaning and purpose together!
</p>
<button type="submit" value="Read The Blog" class="blog-btn hero-btn">
Read The Blog
</button>
<button type="submit" value="Subscribe" class="sub-btn hero-btn">
Subscribe
</button>
</div>
<!--Begin Hero Images-->
<div class="img-section">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/food1.jpg"
width="25%"
title="Healthy Food Lifestyle"
class="hero-img food1"
/>
<div class="row">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga1.jpg"
width="25%"
title="Yoga Lifestyle"
class="hero-img yoga1"
/>
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/travel2.jpg"
width="25%"
title="Traveling Lifestyle"
class="hero-img travel2"
/>
</div>
</div>
</main>
<!--End Hero Images-->
<hr />
<!--Begin Yoga Section -->
<section class="yoga-section">
<div class="yoga-container">
<img
src="https://rawcdn.githack.com/KeshonsWalksOfLife/free-thinking-design-Pro.2/0fd535754c1d4f6f07fdf095defc6a4c5a1a78bc/media/yoga-2.jpg"
title="Yoga Lifestyle"
class="yoga-img"
/>
<h2 class="h2-1">
Where<br />
The union of <br />
<span><em>Breath</em></span
>,<br />
<span><em>Body</em></span
>,<br />
and <span><em>Mind</em></span
>,<br />
Illuminates<br />
the path <br />
to inner <br /><span class="peace">Peace and Balance.</span><br />
</h2>
</div>
</section>
<!--End Yoga Section 1-->
<!--Begin Travel Section -->
<section id="travel-section">
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What's The Best Way To Travel?</h2>
<ul class="travel-way">
<li class="travel-supply">
Always carry essential documents like passports and visas.
<img src="" alt="" />
</li>
<li class="travel-supply">
Research local customs and traditions before travel
</li>
<li class="travel-supply">Keep an emergency contact list handy.</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav">What Do I Need To Travel With?</h2>
<ul class="travel-with">
<li class="travel-need">
Supported Travel Gear with New Luggage and fresh supplies and
everyday daily clothes for the new day
</li>
<li class="travel-need">
Come prepared with emergency funds for the rainy days
</li>
<li class="travel-need">Passports and Visas are always forsure</li>
</ul>
</div>
</article>
<article class="travel-art-label">
<div class="flex">
<h2 class="h2-trav places">Where Should I Travel To Next?</h2>
<ul class="list">
<li class="travel-list">
<span class="trav-country">Paris, France;</span>
<p class="list-p">
Romantic streets, iconic museums, and exquisite cuisine, an
unforgettable story unfolds
</p>
</li>
<li class="travel-list">
<span class="trav-country">Tokyo, Japan;</span>
<p class="list-p">
Ancient traditions meet futuristic marvels, amidst a gastronomic
journey and a tapestry of diverse cultures, all within a city
pulsating with vibrant energy.
</p>
</li>
<li class="travel-list">
<span class="travel-country">Machu Picchu, Peru;</span>
<p class="list-p">
Ancient wonders amid stunning mountains, merging history,
breathtaking landscapes, and vibrant Peruvian culture.
</p>
</li>
</ul>
</div>
</article>
</section>
<!--End Travel Section -->
</body>
</html>