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

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>

我为两个不同部分设置的 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”元素中也很重要，这样它就不会降低所有精选帖子图像的不透明度。提前感谢大家!

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

这就是你要找的吗？