所以我正在尝试重新创建这个 cool hover effect seen here ,当您滚动左侧的大销售图片时。
Chris Coyier 然后创建了一个 super detailed tutorial here. 基本上在翻转时,这个很酷的对 Angular 线剥离背景开始在你的 div/box/image 后面动画。
一切正常,除非我将 div 包装在列表中 (ul li)。一旦我这样做,我的代码就会停止工作 :( 有解决办法吗?或者我犯了什么新手错误?
这是我的代码笔: http://codepen.io/leongaban/pen/hpzqD
HTML
<ul>
<li>
<div class="thumb">
<div class="thumb-hover"></div>
<a href="#">
<img src="http://f.cl.ly/items/3k3d1g3K34470d2v2K3O/50d942d85384a.jpeg"/>
</a>
</div>
</li>
</ul>
CSS
ul li {
list-style: none;
float: left;
}
.thumb {
width: 376px;
padding: 15px;
position: relative;
float: left;
margin: 0 20px 0 0;
}
.thumb > img {
display: block;
position: relative;
}
.thumb:hover .product-hover, .thumb:active .product-hover {
opacity: 1;
}
.thumb-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease;
background-size: 30px 30px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
animation: barberpole 0.5s linear infinite;
}
@keyframes barberpole {
from {
background-position: 0 0;
}
to {
background-position: 60px 30px;
}
}
最佳答案
您的示例中似乎有一个小错字。 .product-hover 应该变成 .thumb-hover
另外,你会希望你的 css 是 .thumb > a{ display: block;position:relative; } 否则,条形动画将位于您的图像之上。
在您的代码笔中将 scss 更改为以下内容:
> a {
display: block;
position: relative;
}
&:hover, &:active {
.thumb-hover {
opacity: 1;
}
关于html - 动画悬停效果在 ul > li 内部不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15122514/