0

HTML5/CSS/jQueryを勉強中です。CSSベースのアニメーションでシンプルな記事のサムネイルを作りたいと思っていました。私は CodePen を使用して、これらの小さなことを簡単に共有しています。残念ながら、いくつかの問題が見つかりました。解決方法がわかりません。

1. スケール変換 私の最初の問題は、クラス .singleArticle に追加されたスケール変換が機能しないことです。おそらく他のクラスと競合しているためだと思いますが、見つかりません。

.singleArticle:hover {
   -webkit-box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}

2. FontAwsome 2 つ 目の問題は、:nth-child() セレクターです。それが実際にどのように機能するかを知りたいです（そのため、ここで使用しています）。私はすでに多くのことを試しましたが、バグがどこにあるかを見つけることができません。

.singleArticle .cover {
   height: 250px;
   background-size: cover;
   background: #ccc;
   width: 100%;
   color: white;
   background-position: center;
   background-size: cover;
}

.singleArticle .cover:nth-child(1) {
   background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}

.singleArticle .cover:nth-child(2) {
   background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}

3. Firefox ブラウザ Firefox では すべてのブロックが見えません。また、解決策が見つかりません。

どこで間違いを犯すのか教えてください。おそらく最も簡単な方法は、コード全体をここに配置するのはおそらく最善の考えではないため、codepen を調べることです。

http://codepen.io/danzawadzki/pen/vymVed
4

2 に答える 2

1

ポイント 2 では、nth-child(n) セレクターは、型に関係なく、親の n 番目の子であるすべての要素に一致するため、「n」は数値、数式、キーワードにすることができます。https://css-tricks.com/almanac/selectors/n/nth-child/を参照できます。

ポイント 3 については、.singleArticle の下の opacity: 0 を削除してください。

.singleArticle {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background: #fff;
    width: 430px;
    display: inline-block;
    margin: 15px;
}
于 2016-11-24T08:28:31.447 に答える