悬停动画效果在ul> li内部不起作用

Question

因此，当您将鼠标悬停在左侧的大销售图片上时，我试图重新创建此处看到的非常酷的悬停效果 。

Chris Coyier然后在这里创建了一个超级详细的教程。 基本上是在翻转时，这种很酷的对角线条纹背景开始在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;
  }
}

Answer 1

看起来您的示例中有一个小的错字。 .product-hover应该变成.thumb-hover

另外，您希望CSS为.thumb> a {display：block; 职位：相对 }否则，条形动画将位于图像的顶部。

在您的Codepen中，将scss更改为以下内容：

> a {
 display: block;
 position: relative;
}
&:hover, &:active {
 .thumb-hover {
   opacity: 1; 
 }

}

http://codepen.io/anon/pen/ACewa

Answer 2

假设您试图影响代码段中的<img> ，那么这将行不通：

.thumb > img { ... }

（特别是> ）意味着“将以下规则应用于<img>元素，这些元素是任何具有.thumb类的元素的直接后代（子代）”。 但是根据您的标记，情况并非如此。 尝试仅删除该CSS规则定义中的> 。