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);
}