Затемнение неактивных ссылок / 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) — некий аналог затемнения/осветления.

тема на форуме

Похожие статьи

• Смена картинки через время
• Эффект при наведении (jQuery)