我正在制作一個導航欄，對于每個按鈕，我都有一個 <div> 和 a ， div 是框， a 是文本 超鏈接。
我想讓我的 div 在懸停時改變顏色，問題是如果我添加一個 div :hover 到我的 CSS 它只會在我將滑鼠懸停在 而不是 div 時改變顏色。因此，當我將文本懸停時，該框只會改變顏色。
我還必須將所有內容從我的普通 div 復制到懸停 div，因為如果我只更改顏色，只有文本會。（最后一張圖片是當我的 div hover 只有一個 background-color 屬性時的樣子）圖片上的紅色圓圈是我的滑鼠所在的位置。
我希望這聽起來不會太混亂。下面的代碼和示例：
(this is inside a <nav>)
<div class="menu">
<div class="mapbox"><a class="map" href="">Erangel</a><br></div>
<div class="mapbox"><a class="map" href="">Miramar</a><br></div>
<div class="mapbox"><a class="map" href="">Sanhok</a><br></div>
<div class="mapbox"><a class="map" href="">Vikendi</a><br></div>
<div class="mapbox"><a class="map" href="">Taego</a><br></div>
<div class="mapbox"><a class="map" href="">Karakin</a></div>
</div>
.map{
font-family: 'Rubik Mono One', Arial;
font-size: 1vw;
color: white;
text-decoration: none;
text-shadow: 0.125vw 0.125vw #282b30;
}
.mapbox{
display: flex;
justify-content: center;
align-items: center;
background-color: #424549;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
box-shadow: 0.225vw 0.225vw #1e2124;
}
.mapbox :hover{
display: flex;
justify-content: center;
align-items: center;
background-color: #7289da;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
}
uj5u.com熱心網友回復：
問題是你不應該在:hover.
前：
.mapbox :hover
后：.mapbox:hover
.map {
font-family: 'Rubik Mono One', Arial;
font-size: 1vw;
color: white;
text-decoration: none;
text-shadow: 0.125vw 0.125vw #282b30;
}
.mapbox {
display: flex;
justify-content: center;
align-items: center;
background-color: #424549;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
box-shadow: 0.225vw 0.225vw #1e2124;
}
.mapbox:hover {
background-color: #7289da;
}<div class="menu">
<div class="mapbox"><a class="map" href="#">Erangel</a><br></div>
<div class="mapbox"><a class="map" href="#">Miramar</a><br></div>
<div class="mapbox"><a class="map" href="#">Sanhok</a><br></div>
<div class="mapbox"><a class="map" href="#">Vikendi</a><br></div>
<div class="mapbox"><a class="map" href="#">Taego</a><br></div>
<div class="mapbox"><a class="map" href="#">Karakin</a></div>
</div>uj5u.com熱心網友回復：
交換<div>和<a>修復它。
而不是在<a>里面<div>，放在<div>里面<a>并將CSS懸停類更改為類。
uj5u.com熱心網友回復：
您需要添加!important背景顏色以使其更特定于瀏覽器。
代碼應該是這樣的，
.mapbox:hover {
display: flex;
justify-content: center;
align-items: center;
background-color: #7289da !important;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521596.html
標籤：htmlcss