Последние записи
- Изменить цвет шрифта TextBox на форме
- Ресайз PNG без потери прозрачности
- Вывод на печать графического файла
- Взаимодействие через командную строку
- Перенести программу из Delphi в Lazarus
- Определить текущую ОС
- Автоматическая смена языка (раскладки клавиатуры)
- Сравнение языков на массивах. Часть 2
- wprintf как напечатать кириллицу
- Взаимодействие через командную строку
Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk
Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
21st
Фев
Затемнение неактивных ссылок / jQuery
Posted by maloy under HTML, JavaScript
Dzvene
Есть список, вместо стандартных маркеров стоя изображение (точнее спрайт)
При наведении активная ссылка остается яркой, а остальные темнеют
На CSS получилось реализовать почти все, но с изображениями ни как.
Как с помощью jQuery сделать для активной стандартные стили (обычная яркая), а остальные включая изображения (маркеры) темнели.
Вот код:
<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>
.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;
}
Naive
Неактивные картинки добавь в спрайт и сдвигай при наведении, никакой jQ тут не нужен
vasiatka
Еще можно сделать картинку прозрачной (opacity) — некий аналог затемнения/осветления.
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту
пеллетные котлы
Пеллетный котел Emtas
Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)