html - 当我按下它们时,我的某些链接不会交互
问题描述
我为学校作业制作了这个网站,一切都完美无瑕,直到……这发生了。我尝试将鼠标悬停在导航栏中的主页和新闻按钮上,但它不起作用,当我尝试按下它们时似乎没有任何反应,但联系人和关于按钮似乎工作正常。
body {
margin: 0;
background-image: url("https://ak2.picdn.net/shutterstock/videos/4550942/thumb/1.jpg");
background-position: center;
background-size: cover;
}
.title {
color: black;
background-color: #ad8961;
width: 70%;
height: calc(15vh);
font-size: calc(10vh);
font-family: 'Franklin Gothic Medium', 'Arial Narrow';
text-align: center;
margin-left: 15%;
margin-right: 15%;
padding-top: 0.6%;
}
.bar {
position: relative;
background-color: #04406d;
width: 70%;
height: 60px;
text-align: center;
margin-top: -1%;
margin-right: 15%;
margin-left: 15%;
}
.home {
position: relative;
color: black;
font-size: 22px;
margin-left: -87%;
top: 25%;
}
.news {
position: relative;
color: black;
font-size: 22px;
margin-left: -66%;
top: -17%;
}
.contacts {
position: relative;
color: black;
font-size: 22px;
margin-left: -41%;
top: -60%;
}
.about {
position: relative;
color: black;
font-size: 22px;
margin-left: 90%;
top: -104%;
}
.box {
background-color: #ad8961;
width: 70%;
height: calc(76.5vh);
text-align: center;
color: black;
margin-top: -1.7%;
margin-right: 15%;
margin-left: 15%;
}
.boxtext {
background: white;
margin-left: 10%;
margin-right: 10%;
}
a:hover {
background-color: darkblue;
}
a:link {
color: black;
}
a:visited {
color: black;
}
<div class="title">Sample Text</div>
<div class="bar">
<div class="home"><a href="#home">Home</a></div>
<div class="news"><a href="#news">News</a></div>
<div class="contacts"><a href="#contacts">Contacts</a></div>
<div class="about"><a href="#about">About</a></div>
</div>
<div class="box">
<div class="boxtext">
<h1><strong>Lorem Ipsum</strong></h1>
<p></p>
</div>
</div>
关于为什么会发生这种情况的任何建议?
解决方案
推荐阅读
- json - 使用 Scala/Spark 读取 Json 文件
- macos - 在 Mac M1 中使用 make 时出现“ld:未找到架构 arm64 的符号”
- sql - Postgres 三月的结果
- ant - 如何压缩多个子目录并将子目录名称用作 zip 文件名?
- python - 从 python 头函数中删除数据类型信息行
- javascript - 对象数组,将相似对象连接到一个对象
- gremlin - 为 Gremlin 麻袋实施 'max'
- javascript - 如何在 D3.js 中添加自定义 svg 形状
- forms - 如何使用反应形式设置不同的输入类型?
- sql - 通过 PowerShell 将数据插入 SQL 时缺少行