Fiddle

Question

我有一个愚蠢的导航条，它证明非常难以使用onmouseover效果。

基本上，当我将鼠标悬停在一个按钮上时，我想要改变两侧图像以及鼠标悬停的图像。这可能吗？

我的Navbar代码：

<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课程等，但有人可以告诉我从哪里开始吗？

EDIT ---------

使用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函数来解决问题！

您可以在此处查看结果：

wwww.crookedcartoon.co.uk/print.html

将鼠标悬停在一张图像上时，请更改另外两张图像

3 个答案:

Fiddle

CSS仅使用伪元素

fiddle