我在我的HTML檔案上遇到了一個問題。我是一個HTML新手，當我為我的靜態網站制作一個頂欄這里時，我試圖為它添加一個懸停，但它沒有正確作業，只在 "搜索 "和 "購物車 "按鈕上作業（在 "聯系我們 "上也有點作用，但只在其右側）。
因此，我不確定為什么懸停在所有按鈕上都不起作用，盡管頂欄在第一眼看上去還不錯。我是否覆寫了一些不應該覆寫的東西？這讓我很困惑。以下是代碼：
<! DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, 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: 透明。
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;
字體大小: 19px;
font-weight: bold;
}
.topnav a：hover {
color: #ecb2ad;
}
.topnav a.seek {
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 {
字體大小: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */; }
@media (min-width: 481px) and (max-width:?768px) {
}
/* 移動 */
@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>/span>
<img id="containerBunny" src="images/molangMilk. png" alt="">
</div>/span>
<div class="topnav">
<a href="#home"/span>> HOME</a>
<a href="#new"/span>> NEW</a>。
<a href="#sale"/span>> SALE</a>/span>
<a href="#products"/span>> PRODUCTS</a>
<a href="#contactUs"/span>> 聯系我們</a>
<a class="search" href="#search">> SEARCH</a>。
<a class="cart"/span> href="#cart"/span>> CART</a>
</div>/span>
</body>
</html>
uj5u.com熱心網友回復：
你的ID為 "container "的元素覆寫了你的導航按鈕。這與你的懸停邏輯無關。
您需要調整您的布局，使容器不再位于頂部，因為滑鼠事件只傳播到最頂部的元素。
假設容器是用來放置您的 "兔子商店 "標題的。我建議調整這個元素的高度。你可能會發現，它不需要使用 "固定 "的定位，而是可以相對于它的父組件。固定的元素是絕對的，相對于視口本身而言。
uj5u.com熱心網友回復：
你的容器元素與頂欄或導航專案重疊，這是因為你固定了容器。 請修改你的代碼
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed; // remove it.
color: white;
font-family: "Cute Aurora Regular"。
}
to
#container {
margin-left: 27px;
margin-top: 41px;
color: white;
font-family: "Cute Aurora Regular"。
}
現在你可以懸停導航。
uj5u.com熱心網友回復：
兩個快速而懶惰的解決方案是在#topBox div中添加以下內容：
pointer-events: none;將允許你點擊 "雖然 "這個div到導航欄 。
height: auto;將防止該 div 與導航條重疊
height: auto?
翻轉沒有達到預期效果的原因是#container & #containerBunny divs覆寫了topnav div。
我建議添加Pesticide Chrome擴展，以幫助可視化你的div，使其更容易看到正在發生的事情。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/331827.html
標籤：
上一篇：MVC中的正確結構與spring
