0

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

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

右列是一个 div。

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

例如。

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

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

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

任何帮助都会非常感谢

4

2 回答 2

2

只是一个非常快速的解决方案，您可能只是更改图像的来源而不是 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 = "";
});

预览 源

于 2009-10-01T12:53:39.703 回答
2

这利用HTML5 数据属性来存储图像资源的位置。

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

不应该花费太多精力来创造一个很好的褪色效果来配合它。

于 2009-10-01T12:58:52.080 回答