Html 悬停不适用于列表中的所有元素
身体{ 背景：urlMypic.jpg； 背景重复：无重复； 背景尺寸：封面； } .btns12{ 位置：绝对位置； 宽度：1200px； 左边距：0px； 右边距：自动； 边际上限：0px； } h1{ 颜色：灰色； 文本转换：大写； 字体大小：70px； 字体系列：无衬线； 边缘顶部：450px； 文本对齐：居中； 左边距：250像素； } .按钮{ 左边距：500px； } .btn{ 边框：1px纯白； 颜色：粉红色； 字体家族：继承； 填充：10px 30px； 文字装饰：无； 字体大小：13px； 文本转换：大写； } .btn1：悬停{ 背景：白色； } .btn2：悬停{ 背景：白色； } .标签{ 浮动：对； 列表样式：无； 边缘顶部：30px； } 李先生{ 显示：内联块； } 李安先生{ 颜色：白色； 字体家族：继承； 填充：5px30px； 文字装饰：无； 背景：粉红色； 身高：100%； } .a:悬停{ 边框：1px纯白； } 马尔瓦的服务 我们拥有街道 您添加了这个cssHtml 悬停不适用于列表中的所有元素,html,css,hover,Html,Css,Hover,身体{ 背景：urlMypic.jpg； 背景重复：无重复； 背景尺寸：封面； } .btns12{ 位置：绝对位置； 宽度：1200px； 左边距：0px； 右边距：自动； 边际上限：0px； } h1{ 颜色：灰色； 文本转换：大写； 字体大小：70px； 字体系列：无衬线； 边缘顶部：450px； 文本对齐：居中； 左边距：250像素； } .按钮{ 左边距：500px； } .btn{ 边框：1px纯白； 颜色：粉红色； 字体家族：继承； 填充：10px 30px； 文字装饰：无； 字体
.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
top:70px;
}
将此css规则添加到class.tabs
.tabs {
position: relative;
z-index: 100;
}
和删除浮动：从.tabs中删除。在您的样式中添加属性可能会对您有所帮助
.tabs{
z-index: 1;
position: relative;
}
.tabs li a{
border:1px solid transparent;
}
我已经编辑了你的代码以使其正常工作。试试这个
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Marwa's Services</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<ul class="tabs">
<li><a href="http://www.facebook.com/"> Home </a></li>
<li><a href="">Contact </a></li>
<li><a href="">Help </a></li>
<li><a href="">Support </a></li>
<li><a href="">FAQ </a></li>
<li><a href="">Hello </a></li>
</ul>
</div>
<div class="btns12">
<h1>WE OWN THE STREETS</h1>
<div class="button">
<a href="http://www.google.com" class="btn btn1"> Register Now </a>
<a href="https://www.cairorunners.com/" class="btn btn2"> Watch Video </a>
</div>
</div>
</body>
</html>
您的代码中似乎没有任何问题，在我测试时，它运行得非常好。@AryanTwanju我添加了完整的css和html代码，您可以重新查看我的问题吗？只是更改了颜色，以便您可以清楚地看到它仍然非常适合我为什么要使用position:absolute之类的东西？我觉得这一点都不必要，这正是让我感到困惑的原因
我们的.btns12覆盖您的按钮，并使它们在一个div下-因此，您无法覆盖它们它的工作。但是你能解释一下top是如何解决这个问题的吗？这是如何停止重写过程的呢？给这个css.menu{position:relative；z-index:1}，不使用top 70 px，因为div从top:0px开始，所以通过添加70px，它是从top开始的，所以它不会重写menuyou应用于类的css规则绝对位置。btns12。由于这个菜单，div被放置在这个菜单后面。为了访问menu div，您需要将大于.btns12的z索引值放入class.tabs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Marwa's Services</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<ul class="tabs">
<li><a href="http://www.facebook.com/"> Home </a></li>
<li><a href="">Contact </a></li>
<li><a href="">Help </a></li>
<li><a href="">Support </a></li>
<li><a href="">FAQ </a></li>
<li><a href="">Hello </a></li>
</ul>
</div>
<div class="btns12">
<h1>WE OWN THE STREETS</h1>
<div class="button">
<a href="http://www.google.com" class="btn btn1"> Register Now </a>
<a href="https://www.cairorunners.com/" class="btn btn2"> Watch Video </a>
</div>
</div>
</body>
</html>
body {
background: url("Mypic.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.btns12 {}
h1 {
color: gray;
text-transform: uppercase;
font-size: 70px;
font-family: sans-serif;
text-align: center;
}
.button {
text-align: center;
}
.btn {
border: 1px solid white;
color: pink;
font-family: inherit;
padding: 10px 30px;
text-decoration: none;
font-size: 13px;
text-transform: uppercase;
}
.btn1:hover {
background: white;
}
.btn2:hover {
background: white;
}
.tabs {
float: right;
list-style: none;
margin-top: 30px;
}
.tabs li {
display: inline-block;
}
.tabs li a {
color: white;
font-family: inherit;
padding: 5px 30px;
text-decoration: none;
background: pink;
height: 100%;
}
.tabs li a:hover {
border: 1px solid white;
}