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 に答える