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

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>

1. imo 最好的解决方案是使用字体中的矢量图标。然后你就可以用css改变图标颜色了。如果您有 svg 的图标，您可以使用 icomoon.io 或类似服务使用它们创建字体。