2014-11-15 119 views
-1

嗨我正在跟随一个教程,一方面似乎不工作,我不明白我要去哪里错了。JQuery和更改img src

当我将鼠标悬停在缩略图上时,它应该将主图像更改为我刚刚悬停的图像。我想我错过了我的代码的JQuery部分。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="core.css"> 
<meta name="robots" content="noindex, nofollow"> 
<title>Build A Greyscale Image Gallery</title> 

<script src="js/jquery-1.11.0.js"></script> 

<script> 

    $.(document).ready(function(){ 
     $.('.thumb').hover(function(){ 
      $('.main_image img').attr('src',$(this).children('img').attr('src')); 
      }); 
    }) 

</script> 

</head> 
<body> 

<h2>Build A Greyscale Image Gallery</h2> 

<div class="gallery"> 
    <div class="main_image"> 
     <img src="images/aston.jpg" /> 
    </div> 

    <div class="selection_image"> 
      <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston2.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston3.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston4.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston5.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston6.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston7.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston8.jpg" /> 
     </div> 
     <div class="thumb"> 
      <div class="overlay"></div> 
      <img src="images/aston9.jpg" /> 
     </div> 
    </div> 
</div> 

</body> 
</html> 

回答

1

我建议你$后删除.。尝试下面的东西!

$(document).ready(function(){ 
    $('.thumb').hover(function(){ 
     $('.main_image img').attr('src',$(this).children('img').attr('src')); 
    }); 
}); 

如果没有添加,还建议添加jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>