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

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

查看您当前的代码，我为您提出了几个解决方案。

您可以将 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>

可以，但我认为这不是最好的解决方案。

根本不用javascript也能得到想要的结果。使用 :hover css class.

figure

.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 或类似服务使用它们创建字体。

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

How to change the colour of the icons in my navigation bar when hovering over the area, not just the image.

html

css

image

nav