1

こんにちは、白黒から色に変わるホバーを作成しようとしていますが、nth-child とホバーを使用できない理由がわかりません。

現在、私のコードは次のようになっています。 

<div class="ads125-wrap">
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-color.png"></a> 
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-bw.png"></a>
</div>


.ads125-wrap {
    height: 203px;
    position: relative;
}
.ad125 {
    margin-bottom: 0;
    margin-right: 0;
    position: absolute;

}

.ads125-wrap a.ad125 img{
 -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; 
}


.ads125-wrap a.ad125:nth-child(1) img:hover{
    opacity:0;
}

ありがとう

4

3 に答える 3

2

でクラスをターゲットにしようとしていますがnth-child、それは機能しません。

すべてのリンクのクラスが同じであれば、これで十分です。

.ads125-wrap a:nth-child( add your number here) img:hover{
    opacity:0;
}
于 2013-10-29T12:27:13.420 に答える
1

申し訳ありませんが、最初にあなたが望むものを手に入れませんでした。グレースケールを取得したい場合は、次のような jQuery プラグインをお勧めします。

最初の方法: http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

(ウェブ上でそれらの多くを見つけることができます) 2 番目の方法は、css フィルターを使用することです (ただし、すべてのブラウザーでサポートされるわけではありません)。

2 番目の方法: http://addcss.com/grayscale-to-color-hover-effect-using-css/

そして 3 番目の方法は、CSS トランジションを使用することです。

3 番目の方法: http://css3.bradshawenterprises.com/cfimg/

あなたの場合、それは次のとおりです。

あなたのケース: 例

于 2013-10-29T12:26:42.387 に答える
0

画像の 1 つのクラス名を変更して、もう 1 つの画像の背後に置いて、1 つの画像だけがフェードインおよびフェードアウトするようにしてみませんか?

http://jsfiddle.net/68Kb6/

<div class="ads125-wrap">
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-color.png"></a> 
  <a class="abcd" href="#"><img alt="abcd" src="syteme-design-bw.png"></a>
</div>
于 2013-10-29T12:22:54.823 に答える