将鼠标悬停在一张图片上时，更改另外 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' 之前。

这可能吗？我想这需要一些复杂的跨度； noshow 课程之类的，但是有人可以告诉我从哪里开始吗？

编辑---------

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

Answer 2

CSS 只使用伪元素回答

您可以只使用 CSS 来做到这一点。

对于这样的 HTML（我更改了它，但它仍然适用于您的情况）

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

设置这个 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);
}

大部分只是调整大小。

关键部分是改变概念。不要尝试在邻居悬停时修改“填充”元素，而是在项目悬停中执行所有操作，并在填充元素上创建伪元素。

fiddle

Answer 3

我已经通过使用 next() 和 previous() jquery 函数解决了这个问题！

您可以在此处查看结果：

www.crookedcartoon.co.uk/print.html