0

画像付きのスライダーがあります。

スライドにマウスを置くと、画像が表示されるだけで、画像にはグレースケール効果がありません。しかし、このエフェクトを変更するためのトランジション ディレイが必要です。

画像であるli要素にカーソルを合わせると、遷移遅延を使用して内部の画像が変更されるように指定するにはどうすればよいですか:

.grayscale
{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}


.grayscale:hover
{
    filter: none;
    -webkit-filter: grayscale(0%);
}



<li class="kwick grayscale"><!-- using it here will slow down slide effect -->
<a href="' . $article['url'] . '">
    <div class="kw_shadow"></div>
    <div class="kw_title">' . $article['title'] . '</div>
    <div class="kw_img">
    <img src="' . $article['imageSrc'] . '" alt="' . $article['title'] . '" style="width: 960px; height: 400px;" class="grayscale" /><!-- using it here will apply grayscale if I'm with my mouse fxp on the bottom on right side -->
    </div>
</a>
</li>

ここでライブです：http ://www.sczdavos.eu/

アイデアをありがとう。

4

2 に答える 2

2

最後に必ず入れ-webkit-transition-delayてください。そうしないと、うまくいきません。

これは機能します

.kwick a:hover img.grayscale{
    -webkit-filter: grayscale(0%);
    -webkit-transition: all .6s ease;
    -webkit-transition-delay:2s;
}

これはしません

.kwick a:hover img.grayscale{
    -webkit-filter: grayscale(0%);
    -webkit-transition-delay:2s;
    -webkit-transition: all .6s ease;
}
于 2013-06-15T12:24:44.137 に答える
0

-webkit-transition-delay プロパティが役立つ場合があります。

これを試して：

.grayscale img {
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
于 2013-06-15T11:51:35.130 に答える