Question

我在这里准备了一个小提琴：

我的目标是，当悬停在彩色框上时，彩色框和化身向左侧设置动画，以便彩色框的大小增大并显示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;
}

Answer 1

我对你在这里问的问题感到有些困惑。这就是我从你的jsFiddle拼凑而成的：http://jsfiddle.net/JGFFd/26/

我已切换<img />和<a />的位置，以便化身受到.food转换的影响。我还使用span替换了css选择器，转而使用类名。我认为这是你获得大部分问题的地方。

请告诉我，如果这不是你所追求的，我会再来一次！

：）

无法获得CSS Transition的预期效果

1 个答案: