2

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

基本上，当我将鼠标悬停在一个按钮上时，我希望两边的 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这是一张图片来展示我希望实现的目标！

4

3 回答 3

2

让你开始的东西：

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

小提琴

于 2013-06-29T15:35:06.927 回答
0

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

其中大部分只是调整尺寸。

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

小提琴

于 2013-06-30T20:18:55.863 回答
0

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

你可以在这里看到结果：

wwww.crookedcartoon.co.uk/print.html

于 2013-07-02T10:02:42.770 回答