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

第二个选择器应该是：

.listing-box:hover .thumb_zoom
于 2012-12-12T23:53:32.710 回答
2

尝试

.listing-box:hover .thumb_zoom {

您目前正在将其应用于 UL，这就是它们都改变颜色的原因。

于 2012-12-12T23:54:10.647 回答