jquery - 将鼠标悬停在一张图像上时，更改另外 2 张图像

Question

我有一个形状愚蠢的导航栏，事实证明使用鼠标悬停效果非常困难。

基本上，当我将鼠标悬停在按钮上时，我希望两侧的 2 个图像以及鼠标悬停在其上的图像发生变化。这可能吗？

我的导航栏代码:

<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>

本质上(我希望这具有逻辑意义):

当鼠标悬停在“images/news.png”上时，我希望“images/newsspace.png”也发生变化。

当鼠标悬停在“images/print.png”上时，我希望“images/printspace.png”进行更改，但也希望“images/newspace.png”进行更改，但更改为与悬停在“images/”上时不同的图像news.png' 之前。

这可能吗？我想这需要一些复杂的跨度；没有表演类(class)之类的，但有人可以告诉我从哪里开始吗？

编辑---------

使用 Jonathan 的 Jquery 建议，我为每个图像添加了一个类，以便脚本更容易识别它们，但是，我现在看到的淡入/淡出功能的问题是图像必须已经在页面上这个脚本来定位它。

$(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
  }
);

这个问题是，我在 img.1a 中淡出，但它不在页面上(仅在我的图像文件夹中)，因此我无法为它提供一个类以供脚本定位。

oi39.tinypic.com/2ns9tvl.jpg这是一张图片来展示我希望实现的目标!

Answer 1

帮助您入门的一些内容:

$("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