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

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. 在我看来，最好的解决方案是使用字体中的矢量图标。然后你就可以用 css 改变图标颜色。如果您有 svg 图标，您可以使用 icomoon.io 或类似服务使用它们创建字体。