翻转图像变暗

Question

I have a list of images that need to darken on rollover. 我有一个需要在翻转时变暗的图像列表。 I would REALLY love to do this without a bloated css rollover technique as anytime spent out of photoshop makes me very happy. 我真的很乐意在没有膨胀的css过渡技术的情况下执行此操作，因为任何在photoshop中花费的时间都会让我感到非常高兴。 I got part of the way there but something is going wrong. 我进入了那里，但是出了点问题。 Here it is live: 这是现场直播：

http://daveywhitney.com/dark/ http://daveywhitney.com/dark/

CODE: 码：

<!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>

Answer 1

How is this: 这怎么样：

JSFiddle 的jsfiddle

What I changed: 我改变了什么：

<ul> and <li> to <div> . <ul>和<li>到<div> 。 Added kitchy class to all menu items, 为所有菜单项添加了kitchy类，

Changed this CSS: 更改了此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;
}

Answer 2

这可能是您要寻找的：如何在鼠标悬停时使图像变暗？

Answer 3

Dont set the width, height, for the li , and don't set it to inline, instead use float: left . 不要为li设置宽度，高度，也不要将其设置为内联，而是使用float: left 。

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

翻转图像变暗

问题描述

3 个解决方案

解决方案1
6 已采纳 2011-03-09 17:06:22

解决方案2
0 2011-03-09 17:02:03

解决方案3
0 2011-03-09 17:06:19

翻转图像变暗

问题描述

3 个解决方案

解决方案1 6 已采纳 2011-03-09 17:06:22

解决方案2 0 2011-03-09 17:02:03

解决方案3 0 2011-03-09 17:06:19

解决方案1
6 已采纳 2011-03-09 17:06:22

解决方案2
0 2011-03-09 17:02:03

解决方案3
0 2011-03-09 17:06:19