Question

在悬停时将3张图像淡入灰度的最简单方法是什么？这是我的页脚。

这是我的HTML代码：

<ul class="review-icons">
    <li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26">
        </a>
    </li>
    <li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26">
        </a>
    </li>
    <li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26">
        </a>
    </li>
</ul>

到目前为止我的CSS：

ul.review-icons > li {
display: inline;
list-style: none;
margin: 15px;
top: 5px;
position: relative;
}

小提琴中的样子： http://jsfiddle.net/FLBRG/2/

**额外 - 灰度可以从下到上滚动

Plz n Thx

Answer 1

一种简单的方法（但取决于您的背景颜色是白色）：

ul.review-icons > li:hover {
    opacity: 0.5;
}

在无序列表图像上应用灰度

1 个答案: