Jquery - 当链接悬停时，在单独的 DIV 中切换图像答案

【问题标题】：Jquery - when a link is hovered, switch an image in a seperate DIVJquery - 当链接悬停时，在单独的 DIV 中切换图像
【发布时间】：2010-12-02 23:45:48
【问题描述】：

我是 Jquery 的新手，在以下工作中遇到问题。

我有一个包含两列的网页。左列是链接的无序列表。

右列是一个div。

我想要做的是让 div 在右栏中，当用户将鼠标悬停在左栏中的链接上时更改其图片

例如。

用户悬停链接 1 div 变为显示图像 1

用户悬停链接 2 div 显示图片 2

无论我做什么，我似乎都无法让它工作。

任何帮助都会很棒谢谢

【问题讨论】：

遇到什么问题？到目前为止你做了什么？

标签： jquery image hyperlink switching

【解决方案1】：

只是一个非常快速的解决方案，您可以只更改图像的来源而不是 div。

<a href="javascript:;" class="mylink" id="link1">link1</a>    
<a href="javascript:;" class="mylink" id="link2">link2</a> 
<div class="mydiv" ></div>

$(".mylink").bind("mouseover",function(){
  if ( this.id == 'link1' )
  {
     $(".mydiv")[0].innerHTML = "<img src='1.png'.. />";  
  }
  else
  {
     $(".mydiv")[0].innerHTML = "<img src='2.png' .. />";  
  }
}).bind("mouseout",function(){

  $(".mydiv")[0].innerHTML = "";
});

Preview Source

【讨论】：

【解决方案2】：

这利用HTML5 data attributes来存储图片资源的位置。

<ul>
    <li><a href="foos.html" data-image-src="images/foo.png">What is a foo?</a></li>
    <li><a href="bars.html" data-image-src="images/bar.jpg">Find a good bar!</a></li>
</ul>

我什至会装上一个快速的图像预加载器。

$(function() {
    $('ul a')
        .mouseover(function() {
            $('div img').attr('src', this.getAttribute('data-image-src'));
        })
        .each(function() {
            new Image().src = this.getAttribute('data-image-src');
        });
}

创建一个漂亮的淡入淡出效果也不应该花费太多精力。

【讨论】：