我正在尝试使用 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>
最佳答案
你缺少一个 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);
}
关于css - iHover git 元素有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31031267/