动画悬停效果不在ul内部工作>里

时间:2013-02-27 21:12:45

标签: html css css3 animation hover

所以当你翻转左边的大型销售图片时,我正试图重新创建这个cool hover effect seen here

Chris Coyier然后创建了super detailed tutorial here. 基本上在翻转时,这个很酷的对角线剥离背景会在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;
  }
}

2 个答案:

答案 0 :(得分:1)

看起来你的例子中有一个小错字。 .product-hover应该成为.thumb-hover

另外,你会希望你的CSS为.thumb&gt;一个{display:block;位置:相对;如果没有它,条形动画将位于图像之上。

在您的codepen中将scss更改为以下内容:

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

}

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

答案 1 :(得分:0)

假设您试图影响代码段中的<img>,这不会起作用:

.thumb > img { ... }

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