0

ですから、左側の大きな販売画像をロールオーバーすると、ここに表示されているこの本当にクールなホバー効果を再現しようとしています。

その後、ChrisCoyierがここで非常に詳細なチュートリアルを作成しました。 基本的にロールオーバーでは、このクールな斜めのストリップされた背景がdiv / box/imageの背後でアニメーションを開始します。

divをリスト内にラップする場合（ul li）を除いて、すべてが機能します。これを行うと、コードが機能しなくなります:(それを回避する方法はありますか？または、どのような初心者の間違いを犯していますか？

これが私のcodepenです：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;
  }
}
4

2 に答える 2

1

例に小さなタイプミスがあるようです。.product-hover は .thumb-hover になります

また、css を .thumb > a{ display: block; にする必要があります。位置: 相対; そうしないと、バーのアニメーションが画像の上に表示されます。

コードペンで、scss を次のように変更します。

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

}

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

于 2013-02-28T01:06:09.747 に答える
0

コード スニペットでに影響を与えようとしていると仮定すると<img>、これは機能しません。

.thumb > img { ... }

これは (具体的には)、「 class を持つ任意の要素の直接の子孫 (子) である要素に次のルールを適用する」こと>を意味します。 しかし、あなたのマークアップによると、そうではありません。その CSS ルール定義の を削除してみてください。<img>.thumb>

于 2013-02-27T21:15:25.070 に答える