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

【问题标题】：images change in display div as you mouse over links another div当您将鼠标悬停在链接另一个 div 上时，显示 div 中的图像会发生变化
【发布时间】：2012-09-01 17:03:00
【问题描述】：

我有两个DIV 元素。
在DIV_1 内部，我希望在调用时显示某些图像，在DIV_2 中我将有许多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';
}

【问题讨论】：

请向我们展示您的标记以及清除代码...

标签： java javascript jquery html css

【解决方案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 放在标签的 data-src 属性中。

【讨论】：

【解决方案2】：

您可能考虑的替代方法是在 CSS 中设置 background-image 属性，然后添加 :hover 伪类以更改为新图像，从而使您完全不必处理 Javascript。

使用transition 属性，您甚至可以在两个图像之间添加淡入淡出，而无需您做任何额外的工作，或者需要包含另一个库，如 jQuery。

【讨论】：

【解决方案3】：

这里有一些你可以使用的简单 jQuery：

$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
    if (e.type === "mouseenter") {
        switch ($(this).attr('href')) {
            case "#link1":   
                $('#DIV2').html('<img src="image1.jpg" />');
                break;
            case "#link2":   
                $('#DIV2').html('<img src="image2.jpg" />');
                break;
        }
    } else if (e.type === "mouseleave") {
        $('#DIV2 img').fadeOut();
    }
});

【讨论】：

【解决方案4】：

jsBin demo

如果你有这样的事情：

  <div id="images">
    <img src="img1.jpg" alt="" />
    <img src="img2.jpg" alt="" />
    <img src="img3.jpg" alt="" />  
  </div>
  
  <ul id="links">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>

CSS：

#images img{position:absolute;display:none;}

你只需要这个：

$('#links li').on('mouseenter mouseleave',function(e){
    $('#images img').stop().fadeTo(300,0);    // do on mouseenter and mouseleave
    if(e.type=='mouseenter'){                 // do just on mouseenter
        $('#images img').eq( $(this).index() ).stop().fadeTo(300,1);
    }
});

【讨论】：