Question

我有两个DIV元素。
内部DIV_1我希望在调用时显示某些图像，在DIV_2我会有很多LINKS。

当LINK中的每个人DIV 2 悬停时，我希望链接相关图片出现在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（）的参数来调整动画速度。放置在标签的data-src属性中的图像的URL。

Answer 2

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

使用transition属性，你甚至可以在两个图像之间添加一个淡入淡出，而不需要额外的工作，或者需要包含另一个像jQuery这样的库。

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

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

鼠标悬停链接另一个div时，图像在显示div中发生变化

4 个答案:

jsBin demo