Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

html - Darken image on rollover

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. I got part of the way there but something is going wrong. Here it is live:

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

How is this:

JSFiddle

What I changed:

<ul> and <li> to <div>. Added kitchy class to all menu items,

Changed this 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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...