[英]I'm inexperienced with HTML and don't understand why my buttons don't follow my CSS
我對按鈕的目標：-當用戶將鼠標懸停在按鈕上時，它將變暗。 -這些按鈕將鏈接到與我的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缺乏經驗，並且我的代碼基於在線示例，因此我可能犯了一些菜鳥般的錯誤。
您的按鈕可以正常工作， #mainDiv掩蓋了#topNav因此無法將鼠標懸停在按鈕上。 您可能希望將topnav的z-index設置為1或2，如下所示：
div.topnav{
border-radius:25px;
background:#03023a;
padding:20px;
width:700px;
height:50px;
position:fixed;
z-index:2;
}
這里還有許多其他問題，您可能還想閱讀一下您的位置，但是按鈕可以正常工作，因為它們現在被遮蓋了。
要使您的: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和css的新手，不了解自己的樣式表做錯了什么
[英]I'm new to html and css and don't understand what I've done wrong with my Style Sheet
我不明白將我的網站圖標添加到我的網站的 HTML 代碼有什么問題？
[英]I don't understand what's wrong with my HTML code for adding my favicon to my website?
Javascript - Codepen 嘗試使用數組更改我的 html 內容的順序，我的函數正在運行但不太好，我不明白為什么
[英]Javascript - Codepen trying to change order of my html content using an array my function is working but not so well i don't understand why
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.