如何在悬停在该区域时更改导航栏中图标的颜色，而不仅仅是图像。

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或类似的服务与他们一起创建字体。