Question

我正在为我的网站创建一个Wordpress精选帖子标题，而我似乎遇到了障碍。我在页面顶部有3个精选帖子（从最近标记的'精选'更新），我希望当我将鼠标悬停在每个帖子上时，每个帖子的图片（精选缩略图）都会淡化（css3不透明度）。我可以让图像在它们自身悬停时褪色，但是当我将鼠标悬停在标签上时（透明的黑色覆盖带/标题）我希望图像也会褪色。它们被称为无序列表，我希望将鼠标悬停在选择器''上，为图像添加样式“style =”opacity：.8;“。这是我对heirarchy的想法：

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

是你在寻找什么？

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

1 个答案: