html - CSS菜单悬停不适用于所有项目
问题描述
下面的示例应该在 CSS main-nav 中具有悬停功能,因此当鼠标指向时,这些项目会在菜单项周围形成一个块。不知何故,这只适用于右侧的 ABOUT,但不适用于主导航中的其他菜单项。有什么遗漏吗?这可能是孩子父母的问题吗?
HTML index.html
<!DOCTYPE html>
<head>
<title>TITLE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo1.png">
</div>
<ul class="main-nav">
<li class="active"><a href=""> HOME </a></li>
<li><a href=""> DOCUMENTS </a></li>
<li><a href=""> LOGIN </a></li>
<li><a href=""> ABOUT </a></li>
</ul>
</div>
<div class="hero">
<h1>Welcome</h1>
<div class="button">
<a href="" class="btn btn-one"> Watch Video </a>
<a href="" class="btn btn-two"> Explore More </a>
</div>
</div>
</header>
</body>
</html>
CSS 样式.css
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url(pic1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 115px;
height: auto;
float: left;
margin-top: 25px;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero
{
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 55px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 440px;
}
.btn
{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one
{
font-family: "Roboto", sans-serif;
}
.btn-one:hover
{
background-color: seagreen;
transition: all 0.2s ease-in;
}
.btn-two
{
font-family: "Roboto", sans-serif;
}
.btn-two:hover
{
background-color: darkorange;
transition: all 0.2s ease-in;
}
解决方案
您的问题的原因是您的.hero
元素具有绝对位置并且位于左上角(由于应用了默认设置),因此它与大多数其他代码重叠。你应该改变它。
推荐阅读
- c# - 如何使用“async”和“await”正确地使应用程序异步?
- php - 将对象推送到数组正在覆盖以前的值
- ftp - 是否可以在 Visual Studio 2019 中通过 FTP 发布 .NET Core 控制台应用程序?
- html - 尝试用css做一个基本的视差网站
- swift - 按钮或图像上的 Swift ui macOS 弹出框
- angular - Angular:使用“GitHub”页面重新加载后获取“404”
- angular - 出现错误- GET http://localhost:8080/hello/variable/user net::ERR_FAILED 运行 Angular+Spring Boot 应用程序
- rust - 更高等级的特征界限和函数参数
- python - 缩放 QMainwindow
- html - 如何阻止div背景重叠