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/

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

如果这不是你想要的，请告诉我，我会再做一次！

:)

于 2012-08-08T14:19:19.627 回答