Nathan Cook Nathan Cook - 11 days ago 7
CSS Question

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

I'm trying to change the colour of the icons from White to Black in my navigation bar when hovering over the area, not just the image. I've got the image to change when I hover purely over the image, but I would like to expand this to the area around it. Any help would be appreciated, my code is below.

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>







Homepage

Cars

Motorcycles

Bicycles

Boats






CSS

Answer

Looking at your current code I came up with several solutions for you.

  1. You can move your onmouseover and onmouseout events to the a tag and use function to change your images.

    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>

It will do, but I don't think it is the best solution.

  1. You can achieve the desired result without using javascript at all. Add two images to the figure element and show only one at a time using :hover css class.

.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. The best solution, imo, would be to use vector icons from font. Then you would be able to change icon color with css. If you have svg's of your icons you can create the font with them using icomoon.io or similar service.
Comments