Question

我一直在为这个问题苦苦挣扎几天。基本上我想要达到的目标与此相同：http://www.webdesignerdepot.com/

当鼠标位于也具有过渡效果的缩略图上时，突出显示链接。我知道它可能与相邻的兄弟选择器有关，但我对此有点新，我无法在stackoverflow上找到正确的答案。到目前为止，这是我的代码：

HTML

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

和CSS

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

提前感谢您的帮助

PS：英语不是我的第一语言所以请耐心等待：）

编辑：

嗯，我刚想通了。它实际上是一个相邻的兄弟选择器问题，它实际上很容易=）

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

Answer 1

工作DEMO

试试这个

CSS

    .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');
     });
 });

HTML

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

希望这有帮助，谢谢

Answer 2

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

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

Code and example

我不确定这个，但maby尝试使用：transform 0.5s linear 0s;

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

2 个答案:

CSS

码

HTML