When hovering over one image, change another 2 images

Question

I have a stupidly shaped nav bar and it is proving incredibly hard to use onmouseover effects.

Basically, when i hover over a button, i'd like the 2 images either side to change as well as the image that the mouse is hovering over. Is this possible?

My Navbar code:

<div align="left" id="navbar">

<ul class="navbarlist">
    <li><a href="news.html"><img src="images/news.png" onmouseover="this.src='images/newshover.png'" onmouseout="this.src='images/news.png'"></a></li>
    <li><img src="images/newsspace.png"></li>
    <li><a href="print.html"><img src="images/print.png"onmouseover="this.src='images/printhover.png'" onmouseout="this.src='images/print.png'" ></a></li>
    <li><img src="images/printspace.png"></li>
    <li><a href="design.html"><img src="images/design.png" onmouseover="this.src='images/designhover.png'" onmouseout="this.src='images/design.png'"></a></li>
    <li><img src="images/designspace.png"></li>
    <li><a href="contact.html"><img src="images/contact.png" onmouseover="this.src='images/contacthover.png'" onmouseout="this.src='images/contact.png'"></a></li>
    <li><img src="images/contactspace.png"></li>
    <li><a href="http://crookedcartoon.bigcartel.com/"><img src="images/shop.png" onmouseover="this.src='images/shophover.png'" onmouseout="this.src='images/shop.png'"></a></li>
    <li><img src="images/navend.png"></li>
</ul>   

</div>

Essentially (i hope this makes logical sense):

When hovering over 'images/news.png' i'd like 'images/newsspace.png' to change also.

When hovering over 'images/print.png' i'd like 'images/printspace.png' to change BUT ALSO 'images/newspace.png' to change but to a different image than when i hovered over 'images/news.png' previously.

Is this possible? I imagine it'll require some complicated span; noshow classes and such, but can someone tell me where to even start?

EDIT---------

Using Jonathan's Jquery suggestion I added a class to each of my images to make identifying them easier for the script, however, the issue i see now with the fade in/out function is the image has to already be on the page for this script to target it.

$(document).ready(function(){
$("ul.navbarlist li:img.news").hover(
  function () {
    $(this).fadeOut
    $("ul.navbarlist li:img.newsspace").fadeOut
  },
  function () {
    $(this).fadeIn
    $("ul.navbarlist li:img.1a").fadeIn
  }
);

This issue is, im fading in img.1a but it isn't on the page (just in my images folder) so i can't give it a class for the script to target it from.

oi39.tinypic.com/2ns9tvl.jpg Here is an image to demonstrate what i'm hoping to achieve!

Answer 1

I have remedied the problem by using next() and previous() jquery functions!

You can see the results here:

wwww.crookedcartoon.co.uk/print.html

Answer 2

CSS only answer using pseudo elements

You can do it using just CSS.

For an HTML like this (I changed it, but it will work anyway in your case)

<div class="item" id="item1"></div>
<div class="filler"></div>
<div class="item" id="item2"></div>
<div class="filler"></div>
<div class="item" id="item3"></div>
<div class="filler"></div>
<div class="item" id="item4"></div>

Set this CSS:

.item, .filler, .item:before, .item:after {
height: 100px;
float: left;
-webkit-transition: all 1s;
transition: all 1s;
}

.item {
width: 100px;
}

.filler, .item:before, .item:after {
width: 50px;
}

.item {
background-color: gray;
position: relative;
}

.filler {
background-color: lightgray;
}


.item:before, .item:after {
content: '';
position: relative;
opacity: 0;
}

.item:before {
right: 50px;
}

.item:after {
left: 50px;
}

.item:hover:before, .item:hover:after {
opacity: 1;
}

#item1:hover {
    background-color: sandybrown;
}

#item1:after {
background: linear-gradient(90deg, sandybrown, white);
}

#item2:hover {
background-color: lightblue;
}

#item2:before {
background: linear-gradient(270deg, lightblue, white);
}

#item2:after {
background: linear-gradient(90deg, lightblue, white);
}

#item3:hover {
background-color: lightgreen;
}

#item3:before {
background: linear-gradient(270deg, lightgreen, white);
}

#item3:after {
background: linear-gradient(90deg, lightgreen, white);
}

#item4:hover {
background-color: yellow;
}

#item4:before {
background: linear-gradient(270deg, yellow, white);
}

Most of it is just adjusting sizes.

The key part is changing the concept. Instead of trying to modify the "filler" elements on hover of the neighbor, Do everything in the item hover, and create pseudo elements over the filler elements.

fiddle

Answer 3

Something to get you started:

$("img").hover(
  function () {
    $(this).fadeOut("slow")
    $("ul li:last-child img").fadeOut("slow")
  },
  function () {
    $(this).fadeIn("slow")
    $("ul li:last-child img").fadeIn("slow")
  }
);

Fiddle