Затемнение неактивных ссылок

@Dzvene · Регистрация: 27.09.2013

Студворк — интернет-сервис помощи студентам

Есть список, вместо стандартных маркеров стоя изображение (точнее спрайт)

При наведении активная ссылка остается яркой, а остальные темнеют

На CSS получилось реализовать почти все, но с изображениями ни как.

Как с помощью jQuery сделать для активной стандартные стили (обычная яркая), а остальные включая изображения (маркеры) темнели.

Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="menu_content">
      <ul>
          <li class="home"><a href="#">Главная</a></li>
          <li class="service"><a href="#">Служба</a></li>
          <li class="rendzina"><a href="#">Рендзина</a></li>
          <li class="soleperenos"><a href="#">Солеперенос</a></li>
          <li class="media_planning"><a href="#">Медиапланирование</a></li>
          <li class="targeting"><a href="#">Таргетирование</a> </li> 
          <li class="positioning"><a href="#">Позиционирование</a> </li> 
          <li class="media_mix"><a href="#">Медиамикс</a></li>
          <li class="legislation"><a href="#">Законодательство </a></li>             
      </ul>
/div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.menu_content{
    width: 25%;
    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:hover a{
    color: #999;    
}
.menu_content li a{
    -webkit-transition: .2s linear color;
            transition: .2s linear color;
}
.menu_content li:hover a{
    color: #000;
}
.menu_content  ul:hover{    
    color: #999;
}
.menu_content li{; 
    -webkit-transition: .2s linear color;
            transition: .2s linear color;
}
.menu_content ul li:hover{  
    color: #000;
}
.home{  
    background: url(../images/sprite.png) 0 4px no-repeat;
}
.service{
    background: url(../images/sprite.png) 0 -20px no-repeat;
}
.rendzina{  
    background: url(../images/sprite.png) 0 -44px no-repeat;
}
.soleperenos{
    background: url(../images/sprite.png) 0 -68px no-repeat;
}
.media_planning{    
    background: url(../images/sprite.png) 0 -94px no-repeat;
}
.targeting{
    background: url(../images/sprite.png) 0 -118px no-repeat;
}
.positioning{   
    background: url(../images/sprite.png) 0 -142px no-repeat;
}
.media_mix{
    background: url(../images/sprite.png) 0 -166px no-repeat;
}
.legislation{
    background: url(../images/sprite.png) 0 -190px no-repeat;
}

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

Название: qweqweqw.jpg
Просмотров: 50

Размер: 6.0 Кб

@Lazy_Den · 19.02.2014, 00:00

А если попробовать так сделать:

JavaScript
1
2
3
4
5
6
7
8
9
10
.menu_content li{ 
    -webkit-transition: .2s linear opacity;
            transition: .2s linear opacity;
}
.menu_content ul:hover li {
  opacity: 0.5;
}
.menu_content ul li:hover{
  opacity: 1;
}

И убираем остальные эффекты по изменению цвета.

@Dzvene · 19.02.2014, 00:24 **[ТС]**

Я уже делал на CSS, вместо стандартных маркеров стоят изображения, они не меняются.
Плюс там ссылки. В этом вся проблема.
Вот к jQuery и решил прибегнуть.

@Lazy_Den · 19.02.2014, 00:41

Сделайте пример вместе со спрайтами. Попробую помочь.

Добавлено через 14 минут
P.S. А в общем, даже пример не нужен. На данный момент, я вижу несколько выходов: или же изменение прозрачности, как и советовал ранее, или же добавить в спрайт подготовленные изображения с измененной цветностью, или добавлять псевдоэлемент, который будет иметь полупрозрачный фон и перекрывать элемент списка.

@Dzvene · 19.02.2014, 00:43 **[ТС]**

Сообщение от Lazy_Den

Сделайте пример вместе со спрайтами. Попробую помочь.

Извиняюсь не совсем понял, а куда его вместе с изображениями можно выложить?

@Lazy_Den · 19.02.2014, 00:50

Сообщение от Dzvene

Извиняюсь не совсем понял, а куда его вместе с изображениями можно выложить?

Не нужно. Смотрите последнее дополнение в предыдущем ответе. А вообще, изображения закидываете на любое хранилище (фотообменник), а в том же CodePen или любой другой песочнице прописываете ссылку на него.

@Dzvene · 19.02.2014, 01:09 **[ТС]**

Сообщение от Lazy_Den

Не нужно. Смотрите последнее дополнение в предыдущем ответе. А вообще, изображения закидываете на любое хранилище (фотообменник), а в том же CodePen или любой другой песочнице прописываете ссылку на него.

Я так уже пробовал, проблема с фоновыми изображениями. Я накатал немного кода jQuery в шапке, он вроде делает как надо, но если убрать курсор все должно вернуться к изначальному виду, а у меня, все остается затемненным.

Добавлено через 6 минут
Вот с изображениями:

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="menu_content">
        <ul>
          <li class="home"><a href="#">Главная</a></li>
          <li class="service"><a href="#">Служба</a></li>
          <li class="rendzina"><a href="#">Рендзина</a></li>
          <li class="soleperenos"><a href="#">Солеперенос</a></li>
          <li class="media_planning"><a href="#">Медиапланирование</a></li>
          <li class="targeting"><a href="#">Таргетирование</a> </li> 
          <li class="positioning"><a href="#">Позиционирование</a> </li> 
          <li class="media_mix"><a href="#">Медиамикс</a></li>
          <li class="legislation"><a href="#">Законодательство </a></li>             
        </ul>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.menu_content{
    width: 25%;
    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:hover a{
    color: #999;    
}
.menu_content li a{
    -webkit-transition: .2s linear color;
            transition: .2s linear color;
}
.menu_content li:hover a{
    color: #000;
}
.menu_content  ul:hover{    
    color: #999;
}
.menu_content li{; 
    -webkit-transition: .2s linear color;
            transition: .2s linear color;
}
.menu_content ul li:hover{  
    color: #000;
}
.home{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.service{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.rendzina{  
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.soleperenos{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.media_planning{    
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.targeting{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.positioning{   
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.media_mix{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}
.legislation{
    background: url([url]http://i7.picsplace.ru/images/190214853d7ed10a1e6bd59af3dd9dcb205aa3.jpg[/url])  no-repeat;
}

Комментарий модератора

Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.

@Lazy_Den · 19.02.2014, 01:12

Не хотите CSS, пусть будет jQuery:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    var li = $('.menu_content li');
    li.hover(
        function(){
            $(this).removeClass('opacacity-style');
            li.not(this).addClass('opacacity-style');
        },
        function(){
            li.removeClass('opacacity-style');
        }
    );
});

@Dzvene · 19.02.2014, 01:21 **[ТС]**

Я не правильно написал,)

Спасибо!)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	19.02.2014, 00:24 [ТС]
	Я уже делал на CSS, вместо стандартных маркеров стоят изображения, они не меняются. Плюс там ссылки. В этом вся проблема. Вот к jQuery и решил прибегнуть. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	19.02.2014, 00:41
	Сделайте пример вместе со спрайтами. Попробую помочь. Добавлено через 14 минут P.S. А в общем, даже пример не нужен. На данный момент, я вижу несколько выходов: или же изменение прозрачности, как и советовал ранее, или же добавить в спрайт подготовленные изображения с измененной цветностью, или добавлять псевдоэлемент, который будет иметь полупрозрачный фон и перекрывать элемент списка. 2

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	19.02.2014, 01:21 [ТС]
	Я не правильно написал,) Спасибо!) 0