如何在懸停在該區域時更改導航欄中圖標的顏色，而不僅僅是圖像。

Question

我試圖改變圖標的​​顏色從白色到黑色在我的導航欄上時，不僅在圖像上懸停的區域。當我將圖像懸停在圖像上時，我已經改變了圖像，但我想將其擴展到周圍的區域。任何幫助將不勝感激，我的代碼如下。

HTML：

.navbar { 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    background-color: transparent; 
 
    overflow: auto; 
 
    display: block; 
 
} 
 
.navbar a { 
 
    width: 20%; 
 
    padding: 2px 0; 
 
    float: left; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.navbar a:hover { 
 
    background-color: white; 
 
    color: black; 
 
    display: block; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
.menubar { 
 
    width: 32px; 
 
    height: 32px; 
 
}

<div class="navbar"> 
 

 
    <a href="homepage.html"> 
 
    <figure> 
 
     <img class="menubar" src="../images/icons/home.png" onmouseover="this.src='../images/icons/home_black.png'" onmouseout="this.src='../images/icons/home.png'" /> 
 
     <figcaption>Homepage</figcaption> 
 
    </figure> 
 
    </a> 
 

 
    <a href="car.html"> 
 
    <figure> 
 
     <img class="menubar" src="../images/icons/car.png" onmouseover="this.src='../images/icons/car_black.png'" onmouseout="this.src='../images/icons/car.png'" /> 
 
     <figcaption>Cars</figcaption> 
 
    </figure> 
 
    </a> 
 

 
    <a href="motorbike.html"> 
 
    <figure> 
 
     <img class="menubar" src="../images/icons/motorcycle.png" onmouseover="this.src='../images/icons/motorcycle_black.png'" onmouseout="this.src='../images/icons/motorcycle.png'" /> 
 
     <figcaption>Motorcycles</figcaption> 
 
    </figure> 
 
    </a> 
 

 
    <a href="cycle.html"> 
 
    <figure> 
 
     <img class="menubar" src="../images/icons/bicycle.png" onmouseover="this.src='../images/icons/bicycle_black.png'" onmouseout="this.src='../images/icons/bicycle.png'" /> 
 
     <figcaption>Bicycles</figcaption> 
 
    </figure> 
 
    </a> 
 

 
    <a href="boat.html"> 
 
    <figure> 
 
     <img class="menubar" src="../images/icons/boat.png" onmouseover="this.src='../images/icons/boat_black.png'" onmouseout="this.src='../images/icons/boat.png'" /> 
 
     <figcaption>Boats</figcaption> 
 
    </figure> 
 
    </a> 
 

 

 

 

 
</div>

首頁 汽車 摩托車 自行車 船

CSS

Answer 1

看看您當前的代碼，我爲您提出了幾種解決方案。

1. 您可以將您的onmouseover和onmouseout事件到a標籤和使用功能來改變你的形象。

function changeImageSrc(target, newSrc) { 
 
     var img = target.getElementsByTagName('img')[0]; 
 
     img.src = newSrc; 
 
    }

.navbar { 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    background-color: transparent; 
 
    overflow: auto; 
 
    display: block; 
 
} 
 
.navbar a { 
 
    width: 20%; 
 
    padding: 2px 0; 
 
    float: left; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.navbar a:hover { 
 
    background-color: white; 
 
    color: black; 
 
    display: block; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
.menubar { 
 
    width: 32px; 
 
    height: 32px; 
 
}

<a href="homepage.html" onmouseover="changeImageSrc(this, '../images/icons/home_black.png')" onmouseout="changeImageSrc(this, '../images/icons/home.png')"> 
 
    <figure> 
 
    <img class="menubar" src="../images/icons/home.png" /> 
 
    <figcaption>Homepage</figcaption> 
 
    </figure> 
 
</a>

它會做，但我不認爲這是最好的解決辦法。

1. 您可以在不使用JavaScript的情況下實現所需的結果。將兩個圖像添加到figure元素，並使用:hover css類一次僅顯示一個圖像。

.navbar { 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    background-color: transparent; 
 
    overflow: auto; 
 
    display: block; 
 
} 
 
.navbar a { 
 
    width: 20%; 
 
    padding: 2px 0; 
 
    float: left; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.navbar a:hover { 
 
    background-color: white; 
 
    color: black; 
 
    display: block; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
.menubar { 
 
    width: 32px; 
 
    height: 32px; 
 
} 
 
.show-on-hover { 
 
    display: none; 
 
} 
 
.product:hover .hide-on-hover { 
 
    display: none; 
 
} 
 
.product:hover .show-on-hover { 
 
    display: inline; 
 
}

<a class="product" href="motorbike.html"> 
 
    <figure> 
 
    <img class="menubar hide-on-hover" title="Hidden on hover" src="../images/icons/motorcycle.png" /> 
 
    <img class="menubar show-on-hover" title="Visible on hover" src="../images/icons/motorcycle_black.png" /> 
 
    <figcaption>Motorcycles</figcaption> 
 
    </figure> 
 
</a>

最好的解決方案，伊莫是使用載體的圖標從字體。然後，你將能夠改變與CSS的圖標顏色。如果您有圖標的svg，您可以使用icomoon.io或類似的服務與他們一起創建字體。