Javascript 如何将类添加到悬停时的其他元素？

我正在为我的网站创建一个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>

总之，我知道我需要某种Javascript/JQuery解决方案，但我不知道如何制作/实现它。另外，添加的样式包含在它自己的“li”元素中也很重要，这样就不会降低所有特色帖子图像的透明度。。提前感谢大家

更新： 我想我应该澄清一下，我正在尝试制作一个特色帖子的标题，就像在上找到的标题一样。注意，即使他在元素上悬停，他的图片也是不透明度衰减的

  #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;
  }

---

这就是你想要的吗？

不，这些是我当前为特色图像img提供的CSS属性。我想添加样式“style=”opacity:0.8“当我将鼠标悬停在标签上时，移动到个人

下的标签。目前，将鼠标悬停在标签上对图像没有影响，图像的不透明度仅在您将鼠标悬停在图像本身上时才会改变。尝试Andy的解决方案，它会起作用。仔细查看第二个选择器，您会发现它与您的代码不同。FACEPALM感谢Andy提供的解决方案，感谢Duopixel让我了解它。有些日子我觉得我的头好像拧得不够紧。@Matt:哈哈，对不起，应该指出细微的区别不要在你的标题中添加

[solved]

或

[updated]

之类的内容；已经有一种机制可以表明问题已经被成功回答了——按照下面的步骤接受正确的答案。也没有理由在标题中塞满

jQuery/JavaScript

——使用标签，这就是它们的用途。

  #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;
  }