css - 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

你缺少一个 anchor :

  <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 伪元素来进行转换(旋转、平移等)。因此，如果没有 anchor ，它将无法正常工作。

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