2014-11-15 142 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>