0

I have been struggling with this one for a while now, I have been looking for other similar questions but haven't been able to find an answer to my problem yet. I am looking to change the image in my navigation bar when I hover over the link below my image.

This is my navigation bar when I'm not hovering over the link "Home" for example.

enter image description here

And this is what I want to be happening when I hover over the link "Home"

Any help would be greatly appreciated!

enter image description here

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 18px;
  font-family: 'Poppins';
}

li, a {
  text-decoration: none;
  color: white;
}

ul {
  list-style: none;
}

.navbar {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 2em;
  padding-top: 2em;
}

.navlink::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 5px;
  background-color: #703FFF;
  margin-top: 120px;
  margin-left: 2px;
  border-radius: 10px;
}

.navlink:nth-last-child(2)::before {
  margin-left: 20px;
}

.navlink:last-child::before {
  margin-left: 15px;
}

.navlink {
  display: flex;
  flex-direction: column;
  margin-right: 2.5em;
}

.navlink img {
  width: 3em;
  align-self: center;
}

/* Portfolio link */
.navlink:nth-last-child(3) {
  margin-right: 2em;
}

/* contact link */
.navlink:last-child {
  margin-left: -1em;
}

.navlink a{
  align-self: center;
  margin-top: 2em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
}

.new-wave {
  background: url("../images/Nav_Wave.png") center center/cover no-repeat;
  height: 110vh;
}
<div class="new-wave">
    <div class="navbar">
        <div class="navlink">
          <img src="images/home_dark.png" alt="">                                                                                   
          <a href="#">home</a>

        </div>
          <div class="navlink">
          <img src="images/about_dark.png"  alt="">
            <a href="#">about</a>
        </div>
        <div class="navlink">
          <img src="images/skills_dark.png"  alt="">
          <a href="#">skills</a>
        </div>
        <div class="navlink">
          <img src="images/portfolio_dark.png"  alt="">
          <a href="#">portfolio</a>
        </div>
        <div class="navlink">
          <img src="images/contact_dark.png"  alt="">
          <a href="#">contact</a>
        </div>
      </div>
    </div>
Greger
  • 47
  • 7

1 Answers1

1

You can use javascript to change the img src when you hover over the link. And set it back when you leave.

First give your elements some ID:

<img  id ="home-img"src="images/home_dark.png" alt="">                                                                                   
<a id ="home" href="#">home</a>

Then listen for the events:

document.getElementById("home").onmouseenter = function() {
  document.getElementById("home-img").src = "other/img.png"
}
document.getElementById("home").onmouseleave = function() {
  document.getElementById("home-img").src = "images/home_dark.png"
}
Arthur Pereira
  • 1,509
  • 2
  • 8
  • 18
  • How would I go about if I wanted to add a transition effect on the images when I mouseover the links? – Greger Nov 21 '20 at 11:09
  • 1
    @Greger It's a bit tricky, but you can create a css class for your element with the desired effect, and then add this class on enter and remove on leave. This will cause the element to display the animation. Check more [here](https://stackoverflow.com/questions/44846614/trigger-css-animations-in-javascript). – Arthur Pereira Nov 21 '20 at 17:05