翻转时使图像变暗答案

【问题标题】：Darken image on rollover翻转时使图像变暗
【发布时间】：2011-07-12 01:51:16
【问题描述】：

我有一个需要在翻转时变暗的图像列表。我真的很想在没有臃肿的 css 翻转技术的情况下做到这一点，因为任何时间花在 Photoshop 之外都让我非常高兴。我成功了，但出了点问题。现场直播：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Darken</title>
<style type="text/css">
#topnav {
    float:left;
    margin:22px 0 0 50px;
    list-style:none;
}
.kitchy {
    background-color:#000000;
    width:112px;
    height:203px;
}

#topnav  a:hover{
    opacity:.6;
}

#topnav  li {
    display:inline;
}
</style>
</head>

<body>
<ul id="topnav">
            <li class="kitchy"><a href="#"><img src="img/kitch.jpg" /></a></li>
            <li><img src="img/deck_small.jpg" /></li>
            <li><img src="img/door_small.jpg" /></li>
            <li><img src="img/lumber_small.jpg" /></li>
            <li><img src="img/tools_small.jpg" /></li>
            <li><img src="img/paint_small.jpg" /></li>
        </ul>
</body>

</html>

【问题讨论】：

标签： html css opacity

【解决方案1】：

这可能是您正在寻找的： How to darken an image on mouseover?

【讨论】：

是的，我之前已经看过了，但它并没有把我带到我需要的地方。

【解决方案2】：

不要为li设置宽度、高度，也不要设置为内联，而是使用float: left。

见：http://jsfiddle.net/x9M2N/1/

【讨论】：

【解决方案3】：

这是怎么回事：

JSFiddle

我改变了什么：

<ul> 和 <li> 到 <div>。为所有菜单项添加了kitchy 类，

更改了这个 CSS：

#topnav {
    float:left;
    margin:22px 0 0 50px;
    list-style:none;
}
.kitchy {
    background: #000;
    width:112px;
    height:103px;
    float:left;
    margin:5px; /*Optional*/
}

#topnav  a:hover{
    opacity:.5;
}

【讨论】：

不错！这正是我一直在寻找的。看起来像显示内联导致了麻烦。感谢您的帮助！