1
コード:https://hastebin.com/otemiveduh.xmlHTMLとCSSのナビゲーション画像ホバリングとメインコンテンツ
問題の説明:されている2つの問題があることなどのpタグなどの他の要素は、セクションの下に追加されたときナビゲーションバーのそれはナビゲーションバーの下に隠されます。さらに、2番目のエラーは、イメージ全体をハイライト表示しても全体の高さの背景色が変わらないことと、別のセクションの他のコードを変更した場合、イメージの垂直方向の配置が失われることです。私はしばらくの間、このエラーを抱えていて、援助のためにコミュニティに向かわなければなりません。
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<a href="#"><img src="icons/home-button.png" /></a>
<a href="#">Ongoing Projects</a>
<a href="#">Purchase Service</a>
<div class="separator"></div>
<a href="#">Employment</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>
は、DOMを固定の面でご協力いただきありがとうございます。私が行っているように私は学んでいるが、あなたがホームアイコン/画像の上にいつホバーするかという問題。それは50全体をカバーするのではなく、アイコンの高さの背景色を変更するだけです(22.1) –
@IsaacOdeyale私はあなたを得ていませんでした。 –
ナビゲーションバーの各項目の上にマウスを置くと、拡大/縮小することはできません。それは完全に高められますが、マウスではそれはしません。 –