遇到iHover git项目的麻烦

Question

我正在尝试使用iHover git项目效果，但只能让它部分工作。这是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);
}