Как я могу добавить класс к другому элементу при наведении?

Question

Я работаю над созданием заголовка для WordPress для моего сайта и, похоже, натолкнулся на стену. У меня есть 3 популярные публикации в верхней части страницы (обновленные с недавно отмеченного тега «Featured»), и я хочу, чтобы изображения (избранные миниатюры) каждой записи исчезали (непрозрачность css3), когда я наводил на них курсор. Я могу сделать изображения блеклыми, когда они сами нависают, но когда я наводю указатель мыши на ярлык (прозрачное черное наложение с заголовком поста), я хочу, чтобы изображение также блекло. Они вызываются в неупорядоченном списке, и я хотел бы, чтобы наведите курсор на селектор, чтобы добавить стиль "style =" opacity: .8; "к изображениям. Вот идея моей иерархии:

  <div id="featured_articles">
     <div class="site_width">
        <ul>
           <li>
               <a href="http://URL.com/Article_1" title="Article 1 Title" rel="nofollow">
                  <img width="315" height="130" src="http://URL.com/Article_1_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 1 Image" title="">                                              
               </a>
               <label>
                  <a href="http://URL.com/Article_1" rel="bookmark">
                      Article 1                                                 
                  </a>
               </label>
            </li>
            <li>
               <a href="http://URL.com/Article_2" title="Article 2 Title" rel="nofollow">
                  <img width="315" height="130" src="http://URL.com/Article_2_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 2 Image" title="">                                              
               </a>
               <label>
                  <a href="http://URL.com/Article_2" rel="bookmark">
                      Article 2                                                 
                  </a>
               </label>
            </li>
            <li class="last">
               <a href="http://URL.com/Article_3" title="Article 3 Title" rel="nofollow">
                  <img width="111" height="130" src="http://URL.com/Article_3_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 3 Image" title="">                                              
               </a>
               <label>
                   <a href="http://URL.com/Article_3" rel="bookmark">
                       Article 3                                                 
                   </a>
               </label>
            </li>
         </ul>
      </div>
   </div>

CSS, который я настроил для двух разных разделов (#featured_articles img * #featured_articles img: hover), находится здесь:

  /******
  CSS Stuff
  ******/

  #featured_articles img {
  opacity: 1;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 300ms;
  }

  .bar3 #featured_articles img:hover{
  opacity: .8;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 300ms;
  }

Итак, в общем, я знаю, что мне нужно какое-то решение Javascript / JQuery, но я не знаю, как его создать / реализовать. Также важно, чтобы добавленный стиль содержался в его собственном элементе 'li', чтобы он не уменьшал непрозрачность изображений всех популярных публикаций . Спасибо всем заранее!

UPDATE: Просто подумал, что должен уточнить, что я пытаюсь сделать заголовок рекомендуемых постов, подобный тому, который найден в http://www.technobuffalo.com. Обратите внимание, как его изображение исчезает в непрозрачности, даже когда он наводит курсор на элемент.

Answer 1

  #featured_articles img {
      opacity: 1;
      -webkit-transition: opacity;
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 300ms;
  }

  .bar3 #featured_articles li:hover img{
      opacity: .8;
      -webkit-transition: opacity;
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 300ms;
  }

это то, что вы ищете?