1

画像ギャラリーにTwitterブートストラップを使用しています：

<ul class="listing">
    <li class="listing-box row-fluid">
        <div class="span4">
            <img class="thumb_zoom" src="/images/Kh.jpg">
        </div>
        <div class="article span8">
            Random text
        </div>
    </li>
</ul>

すべての画像にグレースケール効果を使用しており、ホバーしたときに色が表示されるようにしたい<li>ので、次のCSSを使用しています。

.thumb_zoom {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
}

.listing:hover .thumb_zoom {
   filter: grayscale(0%);
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   -ms-filter: grayscale(0%);
   -o-filter: grayscale(0%);
}

正常に動作しますが、最初にカーソルを合わせるとすべての画像が色付きになりますli。ホバリングしている対応する画像に色を表示したいのですが、li調査したところ、次のことがわかりました。

.listing:hover > .thumb_zoom {

しかし、それは機能していません。

4

2 に答える 2

2

2番目のセレクターは次のようになります。

.listing-box:hover .thumb_zoom
于 2012-12-12T23:53:32.710 に答える
2

試す

.listing-box:hover .thumb_zoom {

現在、それを UL に適用しているため、すべての色が変わります。

于 2012-12-12T23:54:10.647 に答える