我对按钮的目标: - 当用户将鼠标悬停在按钮上时，它会变暗。 - 这些按钮将链接到与我的 index.html 相同的文件夹中的不同 html 文件
我的代码如下:
body {
background-image: url("res/images/space2.jpg");
}
div.wrapper {
width: 720px;
height: 576px;
margin-left: auto;
margin-right: auto;
}
div.banner {
width: 750px;
height: 160px;
position: relative;
top: 0px;
margin-left: auto;
margin-right: auto;
}
div.topnav {
border-radius: 25px;
background: #03023a;
padding: 20px;
width: 700px;
height: 50px;
position: fixed;
}
.button {
background-color: #050462;
border: none;
color: blue;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #0a07ab;
color: black;
border: 2px solid #07057a;
}
.button1:hover {
background-color: #ffffff;
color: #ffffff;
}
.button2 {
background-color: #0a07ab;
color: black;
border: 2px solid #07057a;
}
.button2:hover {
background-color: #ffffff;
color: #ffffff;
}
.button3 {
background-color: #0a07ab;
color: black;
border: 2px solid #07057a;
}
.button3:hover {
background-color: #ffffff;
color: #ffffff;
}
div.maindiv {
width: 750px;
height: 97px;
position: relative;
top: 0px;
margin-left: auto;
margin-right: auto;
}
div.main {
border-radius: 25px;
background: url(res/images/space.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 700px;
height: 3000px;
text-align: center;
}
p.welcome {
margin-left: 15px;
margin-right: 15px;
text-indent: 16px;
}<div class="wrapper">
<div class="banner">
<center>
<img src="res/images/topbanlogo.png" />
</center>
</div>
<div class="topnav">
<center>
<button class="button button1"><a href=
"index.html"><font color="white">Home</font></a></button>
<button class="button button2"><a href=
"downloads.html"><font color="white">Downloads</font>
<button class="button button3"><a href=
"downloads.html"></a><a href=
"downloads.html"></a><a href="uploads.html"><font color=
"white">Uploads</font></a></button></a>
</button>
</center>
</div>
<div class="maindiv"></div>
<div class="main">
<p class="welcome"></p>
<center>
<h1>
<font face="arial" color="white">Easy and simple file downloads.
</font>
</h1>
</center>
<p class="main"></p>
<center>
<p>
<font face="arial" color="white">At Kylosting, we strive to provide the easiest file hosting in the Blockland realm.
</font>
</p>
<p>
<font face="arial" color="white">
<font face="arial" color="white">ph</font>
</font>
</p>
<p>
<font face="arial" color="white">
<font face="arial" color="white">ph</font>
</font>
</p>
<p>
<font face="arial" color="white">
<font face="arial" color="white">ph</font>
</font>
</p>
</center>
</div>
<div class="footer"></div>
</div>如前所述，我对 HTML 缺乏经验，并且我的代码基于在线示例，因此我可能犯了一些菜鸟错误。
最佳答案
要使您的 :hover 状态正常工作，只需将 z-index 值添加到固定的 .topnav 中，因为它被#myDiv 并且需要更高的堆栈索引来识别您的悬停。
div.topnav{
border-radius:25px;
background:#03023a;
padding:20px;
width:700px;
height:50px;
position:fixed;
z-index: 1; /*Added*/
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="res/images/favicon.ico" />
<title>
Kylosting
</title>
<meta charset="utf-8" />
<style type="text/css">
/*<![CDATA[*/
body{
background-image: url("res/images/space2.jpg");
}
div.wrapper{
width:720px;
height:576px;
margin-left:auto;
margin-right:auto;
}
div.banner{
width:750px;
height:160px;
position:relative;
top:0px;
margin-left:auto;
margin-right:auto;
}
div.topnav{
border-radius:25px;
background:#03023a;
padding:20px;
width:700px;
height:50px;
position:fixed;
z-index: 1;
top: 20px;
}
.button{
background-color:#050462;
border:none;
color:blue;
padding:16px 32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px 2px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
cursor:pointer;
}
.button1{
background-color:#0a07ab;
color:black;
border:2px solid #07057a;
}
.button1:hover{
background-color:#ffffff;
color:#ffffff;
}
.button2{
background-color:#0a07ab;
color:black;
border:2px solid #07057a;
}
.button2:hover{
background-color:#ffffff;
color:#ffffff;
}
.button3{
background-color:#0a07ab;
color:black;
border:2px solid #07057a;
}
.button3:hover{
background-color:#ffffff;
color:#ffffff;
}
div.maindiv{
width:750px;
height:97px;
position:relative;
top:0px;
margin-left:auto;
margin-right:auto;
}
div.main{
border-radius:25px;
background:url(res/images/space.jpg);
background-position: left top;
background-repeat: repeat;
padding:20px;
width:700px;
height:3000px;
text-align:center;
}
p.welcome{
margin-left:15px;
margin-right:15px;
text-indent:16px;
}
/*]]>*/
</style>
</head>
<body>
<div class="wrapper">
<div class="banner">
<center>
<img src="res/images/topbanlogo.png" />
</center>
</div>
<div class="topnav">
<center>
<button class="button button1"><a href=
"index.html"><font color="white">Home</font></a></button>
<button class="button button2"><a href=
"downloads.html"><font color="white">Downloads</font>
<button class="button button3"><a href=
"downloads.html"></a><a href=
"downloads.html"></a><a href="uploads.html"><font color=
"white">Uploads</font></a></button></a></button>
</center>
</div>
<div class="maindiv"></div>
<div class="main">
<p class="welcome"></p>
<center>
<h1>
<font face="arial" color="white">Easy and simple file
downloads.</font>
</h1>
</center>
<p class="main"></p>
<center>
<p>
<font face="arial" color="white">At Kylosting, we strive to provide the
easiest file hosting in the Blockland
realm.</font>
</p>
<p>
<font face="arial" color="white"><font face="arial"
color="white">ph</font></font>
</p>
<p>
<font face="arial" color="white"><font face="arial"
color="white">ph</font></font>
</p>
<p>
<font face="arial" color="white"><font face="arial"
color="white">ph</font></font>
</p>
</center>
</div>
<div class="footer"></div>
</div>
</body>
</html>关于html - 我对 HTML 没有经验，不明白为什么我的按钮不遵循我的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49517938/