與iHover混帳項目的問題

Question

我想使用iHover混帳項目效果，但只能讓它部分工作。這裏是鏈接到GitHub的演示和文件

http://gudh.github.io/ihover/dist/index.html（演示） https://github.com/gudh/ihover

我設置一個臨時的假網頁，嘗試和模仿演示。我已經下載了這些文件並上傳了所有的CSS並鏈接了它。它說所有你需要的是CSS和你的好去處。但我沒有得到，因爲我已經鏈接它，它不工作。請幫忙。

這裏是我的測試網站： http://circleton.mybnbwebsite.com/

<div class="row"> 
    <div class="col-sm-6"> 
     <!-- normal --> 

     <div class="ih-item circle effect2 left_to_right"> 
      <div class="img"><img alt="img" src= 
      "http://gudh.github.io/ihover/dist/images/assets/4.jpg"></div> 

      <div class="info"> 
       <h3>Heading here</h3> 

       <p>Description goes here</p> 
      </div> 
     </div><!-- end normal --> 
    </div> 

    <div class="col-sm-6"> 
     <!-- colored --> 

     <div class="ih-item circle colored effect2 left_to_right"> 
      <div class="img"><img alt="img" src= 
      "http://gudh.github.io/ihover/dist/images/assets/5.jpg"></div> 

      <div class="info"> 
       <h3>Heading here</h3> 

       <p>Description goes here</p> 
      </div> 
     </div><!-- end colored --> 
    </div> 
</div> 

Answer 1

你缺少一個錨：

<div class="ih-item circle colored effect2 left_to_right"> 
     <a href="#"> <!-- your code does not have this or the matching end tag --> 
      <div class="img"> 
       <img src="http://gudh.github.io/ihover/dist/images/assets/5.jpg" 
alt="img" /> 
     </div> 

     <div class="info"> 
      <h3>Heading here</h3> 

      <p>Description goes here</p> 
     </div> 
     </a> 
    </div> 

他們的大部分代碼取決於:hover僞元素做變換（上旋轉，平移等）。所以如果沒有錨，它將無法正常工作。

.ih-item.circle.effect2.left_to_right a:hover .img { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}