1

ここにフィドルを用意しました：

http://jsfiddle.net/JGFFd/25/

私が目指しているのは、色付きのボックスにカーソルを合わせると、色付きのボックスとアバターが左にアニメーション化され、色付きのボックスのサイズが大きくなり、innerスパンに含まれるテキストが表示されることです。

そのように単純に聞こえますが、私はそれを解決できないようですので、どんな助けもいただければ幸いです.

フィドルにあるコードのコピーを次に示します。

<div class="blog-posts-grid-box">
    <div class="blog-posts-grid-box-content" id="grid-box0" data-id="id-0">                   
        <h3 class="grid-blog-title">Title</h3>
        <div class="blog-posts-grid-box-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</div>    
    </div> <!-- blog-posts-grid-box-content -->

    <div class="blog-posts-grid-box-pic">
        <img src="http://cdn2.iconfinder.com/data/icons/humano2/128x128/apps/comix.png" class="photo">
        <a href="#" target="_top">                      
            <span class="food">
                <span class="inner">Martin Carlin - Food</span>
            </span>
        </a>
    </div> <!-- blog-posts-grid-box-pic -->
</div>




.blog-posts-grid-box {
    float: left;
    background-color: white;
    width: 218px;
    height: 223px;
    padding: 10px 0 0 24px;
    margin-right: 11px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #333;
}

.blog-posts-grid-box-content {
    width: 195px;
    height: 145px;
}

.blog-posts-grid-box-excerpt {
    margin-top: 10px;
    height: 30px;
    font-size: 13px;
}

h3.grid-blog-title {
    font-weight: bold;
    color: #24212A;
    font-size: 16px;
}

.blog-posts-grid-box-pic {
    position: relative;
    bottom: -32px;
    right: -115px;
    -webkit-transition: width 1s ease-in-out, visibility 1s linear;
    -moz-transition: width 1s ease-in-out, visibility 1s linear;
    -o-transition: width 1s ease-in-out, visibility 1s linear;
    transition: width 1s ease-in-out, visibility 1s linear;
}

.blog-posts-grid-box-pic img {
    width: 52px;
    height: 52px;
    margin-right: -4px;
}

.blog-posts-grid-box-pic span.food {
    background-color: #FFA100;
}

.blog-posts-grid-box-pic span {
    height: 52px;
    width: 52px;
    display: inline-block;
    background: url('/wordpress/wp-content/plugins/wpbook/team21/images/blog-grid-chevron.png') no-repeat 23px 21px;
    top: -42px;
    position: relative;
}

.blog-posts-grid-box-pic .inner {
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    width: 0%;
    overflow: hidden;
    color: white;
}

.blog-posts-grid-box-pic span:hover {
    width: 170px;
    visibility: visible;
    margin-left: -110px;
}

.blog-posts-grid-box-pic.inner span:hover {
    visibility: visible;
}

</p>

4

1 に答える 1

2

私はあなたがここで何を求めているのか少し混乱しています。これは私があなたのjsFiddleから一緒に石畳にしたものです：http：//jsfiddle.net/JGFFd/26/

<img />との位置を切り替えて<a />、アバターが.foodトランジションの影響を受けるようにしました。spanまた、クラス名を使用するために、を使用してcssセレクターを置き換えました。これはあなたが問題の大部分を手に入れていた場所だと思います。

これがあなたが求めていたものではない場合は、私に知らせてください。もう一度スイングします！

:)

于 2012-08-08T14:19:19.627 に答える