如何在悬停时将类添加到不同的元素？

Question

我正在为我的网站创建一个 Wordpress 特色帖子标题，但我似乎遇到了困难。我在页面顶部有 3 个精选帖子（从最近标记的“精选”更新），当我将鼠标悬停在它们上方时，我希望每个帖子的图像（精选缩略图）褪色（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>

我为两个不同部分（#featured_articles img * #featured_articles img:hover）设置的 CSS 在这里：

  /******
  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”元素中也很重要，这样它就不会降低所有精选帖子图像的不透明度。提前感谢大家！

更新： 只是想我应该澄清一下，我正在尝试制作一个特色帖子标题，就像在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;
  }

这就是你要找的吗？