Затемнение изображения при наведении курсора - PullRequest
Новая
       11

Затемнение изображения при наведении курсора

2 голосов
/ 09 марта 2011

У меня есть список изображений, которые должны затемняться при опрокидывании. Я ДЕЙСТВИТЕЛЬНО хотел бы сделать это без раздутой техники ролловера CSS, поскольку любое время, проведенное вне фотошопа, делает меня очень счастливым. Я получил часть пути там, но что-то идет не так. Вот оно живое:

http://daveywhitney.com/dark/

КОД: 

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

6 голосов
/ 09 марта 2011

Как это:

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;
}
0 голосов
/ 09 марта 2011

Не устанавливайте ширину, высоту для li и не устанавливайте его как встроенное, вместо этого используйте float: left.

См .: http://jsfiddle.net/x9M2N/1/

0 голосов
/ 09 марта 2011
...