如何在列表項的懸停上切換類的可見性？

Question

我試圖切換「.image1」的可見性，當我將鼠標懸停在「.block1」上時，但我沒有取得任何成功。我錯過了什麼？誰能幫我嗎？

HTML：

<div class="container"> 
     <div class="wrapper"> 

      <section class="images"> 

       <article id="image" class="image1"> 
        <div class="img"></div> 
       </article> 

       <article id="image" class="image2"> 
        <div class="img"></div> 
       </article> 

       <article id="image" class="image3"> 
        <div class="img"></div> 
       </article> 

      </section> 
      <ul class="blocks"> 

       <li class="block1">Image1 
       </li> 
       <li class="block2">Image2 
       </li> 
       <li class="block3">Image3 
       </li> 

      </ul> 

     </div>  
    </div> 

SCRIPT：

$(document).ready(function() { 
$(".block1").hover(function(){ 
    $(".image1").fadeTo("slow", 1); 
    },function(){ 
     $(".image1").fadeTo("slow", 0); 
}); 
}); 

這是我fiddle

Answer 1

我想你忘了選擇上的jsfiddle jQuery框架。在您的頁面中使用它之前添加jQuery庫。

要在網站內的js文件夾從googleapis

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

Live Demo

$(document).ready(function() { 
    $(".block1").hover(function(){ 
     $(".image1").fadeTo("slow", 1); 
     },function(){ 
      $(".image1").fadeTo("slow", 0); 
    }); 
});