-1

I have a homepage with 3 links. In a div next to it there is a default image. Is there a way to have a default image then swap it out when you hover over the links?

soulshined
  • 9,612
  • 5
  • 44
  • 79
DomWeb
  • 11
  • 3
  • 1
    Could you add a snippet or show some example code you wrote? – Evochrome Feb 20 '19 at 18:26
  • 2
    Some solutions are posted in here, just needs slight adjustments to reference the link instead: https://stackoverflow.com/questions/10886828/changing-image-on-hover – Tim Hunter Feb 20 '19 at 18:26

1 Answers1

1

You can use the ~ general sibling selector to target elements next to another one (siblings), although they don't have to be immediately after:

img.default + img {
 display: none;
}

/* when hover link */
a:hover ~ div img.default {
 display: none;
}
a:hover ~ div img:not(.default) {
 display: block;
}
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>
 
 <div>
   <img class="default" src="https://placekitten.com/g/200/200"/>
   <img src="https://placekitten.com/200/200"/>
 </div>
soulshined
  • 9,612
  • 5
  • 44
  • 79