我的 HTML 文件出现问题。我对 HTML 还很陌生,当我在这里为我的静态网站制作一个顶栏时,我试图给它添加一个悬停,但它不能正常工作,只能在“搜索”和“购物车”按钮上(它也有点适用于“联系我们”,但仅限于它的右侧)。
所以,我不确定为什么悬停在所有按钮上都不起作用,即使顶部栏乍一看还不错。我是否覆盖了我不应该覆盖的东西?这让我很困惑。这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#topBox {
height: 250px;
margin-top:-50px;
margin-left: auto;
margin-right: auto;
background: #cbe9f3;
border-radius: 15px;
}
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed;
color: white;
font-family: "Cute Aurora Regular";
}
.topnav {
overflow: hidden;
font-family: "Cute Aurora Regular";
background-color: transparent;
border: #c9c7c7 0.1px solid;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border-left: none;
border-right: none;
}
.topnav a {
float: left;
color: #b47d50;
text-align: center;
margin-left: 27px;
padding: 14px 16px;
margin-right: -20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
.topnav a:hover {
color: #ecb2ad;
}
.topnav a.search {
margin-left: 290px;
}
.topnav a.cart {
margin-left: 25px;
}
br {
display:none;
}
/* Desktop grande */
@media (min-width: 1025px) {
#topBox {
width:1000px;
}
#container {
font-size: 600%;
}
#containerBunny {
width: 250px;
margin-left: 550px;
margin-top: 150px;
}
.topnav {
width: 1000px;
}
}
/* Desktop pequeno */
@media (min-width: 769px) and (max-width: 1024px) {
#topBox {
width:750px;
}
#container {
font-size: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
}
/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
#topBox {
width:1000px;
}
#container {
font-size: 520%;
}
#containerBunny {
width: 250px;
}
br {
display: block;
}
}
</style>
</head>
<body>
<div id="topBox">
<div id="container">
<p>Bunny <br>Shop</p>
</div>
<img id="containerBunny" src="images/molangMilk.png" alt="">
</div>
<div class="topnav">
<a href="#home">HOME</a>
<a href="#new">NEW</a>
<a href="#sale">SALE</a>
<a href="#products">PRODUCTS</a>
<a href="#contactUs">CONTACT US</a>
<a class="search" href="#search">SEARCH</a>
<a class="cart" href="#cart">CART</a>
</div>
</body>
</html>
两个快速和懒惰的解决方案是将以下内容添加到#topBox
div:
pointer-events: none;
将允许您单击“尽管”div 到导航栏height: auto;
将防止 div 与导航栏重叠翻转未按预期工作的原因是#container
& #containerBunny
div 覆盖了topnav
div。
我建议添加Pesticide Chrome 扩展程序来帮助可视化您的 div 并使其更容易看到发生了什么。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句