Question

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

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

右栏是div。

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

例如

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

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

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

任何帮助都会很棒感谢

Answer 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

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

创建一个漂亮的褪色效果也不需要太多努力。

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

2 个答案: