无法获得所需的 CSS 过渡效果

Question

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

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

​

Answer 1

我对你在这里问的问题有点困惑。这是我从你的jsFiddle拼凑出来的：http://jsfiddle.net/JGFFd/26/

我切换了<img />和<a />的位置，以便头像受到.food过渡的影响。我还使用 span 替换了 css 选择器，转而使用类名。我认为这是您遇到大部分问题的地方。

如果这不是你所追求的，请告诉我，我会再挥杆！

:)