0

我已经为这个问题苦苦挣扎了几天。基本上我想要达到的目标与此相同：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;   
}
4

2 回答 2

1

工作演示

尝试这个

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>

希望这有帮助，谢谢

于 2013-09-01T19:22:44.113 回答
0

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

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

代码和示例

我不确定这一点，但可以尝试使用：transform 0.5s linear 0s;

于 2013-09-01T18:46:27.833 回答