翻轉圖像變暗
[英]Darken image on rollover
問題描述
我有一個需要在翻轉時變暗的圖像列表。 我真的很樂意在沒有膨脹的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>
3 個解決方案
解決方案1
6 已采納 2011-03-09 17:06:22
這怎么樣：
我改變了什么：
<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;
}
解決方案2
0 2011-03-09 17:02:03
這可能是您要尋找的： 如何在鼠標懸停時使圖像變暗？
解決方案3
0 2011-03-09 17:06:19
不要為li設置寬度，高度，也不要將其設置為內聯，而是使用float: left 。
參見： http : //jsfiddle.net/x9M2N/1/
使用CSS使圖像變暗
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.