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

Posted 2023-03-06

技术标签:

【中文标题】将鼠标悬停在一张图片上时，更改另外 2 张图片【英文标题】：When hovering over one image, change another 2 images 【发布时间】：2013-06-27 05:32:34 【问题描述】：

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

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

【问题讨论】：

你最好用 eventListeners 来做。如果你愿意使用像 JQuery 这样的库，那真的很容易。无论如何，在构建站点的其余部分时，我都会使用 jquery，我会研究 eventListeners。谢谢你。 【参考方案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

【讨论】：

谢谢！我如何通过将鼠标悬停在第一张图片上来定位第二张图片？使用 DOM 遍历，使用 id 或 classes 轻松完成。见编辑。我发布了我的脚本，不幸的是另一个问题！ oi39.tinypic.com/2ns9tvl.jpg 这是一张图片来展示我希望实现的目标！【参考方案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);

大部分只是调整大小。

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