Jquery 悬停缩略图时缩略图和H1链接的过渡效果

我为这个问题挣扎了几天。基本上，我试图实现的目标与此相同：

当鼠标位于缩略图上时高亮显示链接，缩略图也具有过渡效果。我知道这可能与相邻的兄弟姐妹选择器有关，但我对这有点陌生，我无法在stackoverflow上找到正确的答案。以下是我目前的代码：

HTML

提前感谢您的帮助

附：英语不是我的第一语言，所以请容忍我：）

编辑：

我刚想出来。事实上，这是一个相邻的同级选择器问题，实际上非常简单=）

---

为了达到这个效果，我会说使用Jquery，我最近在一个餐馆的项目中使用了它，我发现使用Jquery更容易。在本例中，过渡不是平滑的，但很容易使其平滑

查看此链接以获取示例和示例代码

我对此不确定，但可以尝试使用：

转换0.5s线性0
正在工作

试试这个

css
代码
html


希望这有帮助，谢谢你
非常感谢你的快速回答。但我想我可能还不清楚。我的问题不是过渡本身。我只希望当您将光标仅放在缩略图上时，转换（缩略图和H1标记）同时发生。我感谢您的努力=）。对不起，我想我应该让我的问题更简单一些。我想做的是让H2链接在我翻滚图像时改变颜色。@Ben你的问题不是你需要的。看看你的问题标题和内容，改变颜色看起来像问题吗
<div class="postBoxInner"><div class="pic">
                <?php
                if(has_post_thumbnail()) {
                        //the_post_thumbnail();?>
                        <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_image_url(); ?>&amp;h=170&amp;w=347&amp;zc=1" alt="<?php the_title(); ?>"/>
                    <?php } else {
                        echo '<img src="'.get_bloginfo("template_url").'/images/nothumb.jpg"  alt="No Thumbnail"/>';
                    }?></a></div>

                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

#content .postBoxInner .pic{
border:2px solid #d8d8d8;
height:170px;
width:347px;
overflow:hidden;
}

#content .postBoxInner img {
height:171px;
width:348px;
margin:auto;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
}

#content .postBoxInner img:hover{
 -webkit-filter: blur(3px);
}

#content .postBox .postBoxInner h2 {
line-height:20pt;
font-size:18px;
    font-family:Trebuchet MS, Arial, Tahoma, Helvetica, sans-serif;
font-weight:normal;
padding:12px 0 10px;
}

#content .postBoxInner h2 a {
color:#000000;
}

#content .postBoxInner h2 a:hover {
color:#c71515;
text-decoration:none;
}

#content .postBoxInner .pic {
border:2px solid #d8d8d8;
height:170px;
width:347px;
overflow:hidden;
}
#content .postBoxInner .pic:hover+h2 a {
color:#c71515;
text-decoration:none;   
}

    .pic {
    width:500px;
    height:500px;
    position:fixed;
   }
    .animationZoomOut {
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    .animationZoomIN {
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

 $(document).ready(function () {
     $(".pic").hover(function () {

         $('img').removeClass('animationZoomOut').addClass('animationZoomIN');
     },

     function () {
         $('img').removeClass('animationZoomIN').addClass('animationZoomOut');
     });
 });

<div class="pic">
    <img src="https://www.google.com/images/srpr/logo4w.png" />
</div>