java - 当您将鼠标悬停在链接另一个 div 上时，图像在显示 div 中发生变化

Question

我有两个 DIV 元素。
在 DIV_1 中，我希望在调用时显示某些图像，在 DIV_2 i将有许多 LINKS。

当 DIV 2 中的每个 LINK 都被悬停时，我希望链接相关的图像出现在DIV 1，如果另一个 LINK 被悬停，则更改为另一张图片，但当鼠标箭头没有悬停在具体LINK。

Javascript

function showIt(imgsrc) 
{
    document.getElementById('bottle').src=imgsrc;
    document.getElementById('bottle').style.display='block';
}

function hideIt()
{
    document.getElementById('bottle').style.display='none';
}

Answer 1

将此代码添加到您的链接:

<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>

然而它看起来并不漂亮。考虑使用 jQuery。

编辑:

使用 jQuery 你可以这样做:

HTML:

<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />

JavaScript

$(function(){
  $('.changeImage').hover(function(){
         $('.bottle').attr('src',$(this).attr('data-src'));
         $('.bottle').show();
     },
     function(){
         $('.bottle').hide();
     });

})

您可以通过提供动画时间作为 show() 和 hide() 的参数来调整动画速度。放置在标签的数据源属性中的图像的 URL。