Форум Сайтостроение Веб-строительство

При наведении на ссылку, остальные должны темнеть (становится серыми)

D
На сайте с 18.02.2014
Offline
1
Dzvene
602

При наведении на ссылку, она должна оставаться такой-же яркой, а остальные должны темнеть.

Пример: 




HTML :

 

<div class="menu_content">

            <ul>

                <li class="home"><a href="#">Главная</a></li>           

           </ul>

 

 

CSS:

 

.menu_content{

    margin: 30px 0 30px 0;

}

.menu_content ul{

    padding: 10px;

    vertical-align: middle;

 

}

.menu_content ul li{

    margin: 3px 0 3px 0;

    list-style-position: inside;

}

.menu_content ul li a{

    text-decoration: none;

    color: #404040;

    padding: 5px 20px;

    display: block;

    margin: 0 0 0 10px;

}

.menu_content ul li a:hover{

    color: #010101;

}

.home{  

    background: url(../images/sprite.png) 0 4px no-repeat;   /*Используется sprite*/

}


---------- Добавлено 18.02.2014 в 14:03 ----------

http://picsplace.ru/?v=1802148f5a710b766bfd08f63b25fdd68cbe7b.jpg
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#1

И? Что из выше перечисленного мы должны понять? В чем проблема написали хотя бы, а то ванговать, не наш профиль.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
D
На сайте с 18.02.2014
Offline
1
Dzvene
#2
vlad00777:
И? Что из выше перечисленного мы должны понять? В чем проблема написали хотя бы, а то ванговать, не наш профиль.

Извеняюсь.

Вот код:

http://codepen.io/Dzvene/pen/ruilt

Частично сделал.

Только как еще маркеры затемнить если в <li> заключена ссылка?

D
На сайте с 18.02.2014
Offline
1
Dzvene
#3

Вопрос решен.

D
На сайте с 18.02.2014
Offline
1
Dzvene
#4
Dzvene:
Вопрос решен.

Хотя нет, изображения вместо маркеров, не темнеют.

Yur_OK
На сайте с 13.07.2006
Offline
87
Yur_OK
#5

Если правильно понял, проиграйтесь с прозрачностью (opacity) в стиле изображений. Для себя недавно открыл этот параметр и использую именно к объектам при наведении.

Сердце бьется, мысли зреют, мозг не спит! Облачная база каталогов (/ru/forum/708603)
D
На сайте с 18.02.2014
Offline
1
Dzvene
#6
Yur_OK:
Если правильно понял, проиграйтесь с прозрачностью (opacity) в стиле изображений. Для себя недавно открыл этот параметр и использую именно к объектам при наведении.

Пробовал, и -webkit-filter: grayscale(100%) пробовал, темнеют все, включая и активную ссылку

Хотя скорее всего неправильно пишу код

Q8
На сайте с 02.08.2012
Offline
31
q8888
#7
Dzvene:
темнеют все, включая и активную ссылку

Для активного исключение пропишите. Такой вариант подойдет?: 

.menu_content  ul:hover li{ 	

color: #999;

opacity: 0.5; /* Полупрозрачность остальных элементов */

}



.menu_content ul li:hover{	

color: #000;

opacity: 1; /* Полупрозрачность активного элемента */

}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий