Question

我有一个CSS转换，它发生在链接悬停时 - 转换发生在此链接的某些内容上。

我的问题是，当悬停在链接上时，转换（主要是动画宽度和高度属性）可以正常工作，但是在停止悬停时，元素会简单地回到它们未被覆盖的状态 - 而不是转换。

定义的样式是：

a.transition {
    display: block;
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid #000;
    color: #000'
}
a.transition .category_info_container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    transition: height 0.5s, width 0.5s, color 0.5s;
}
a.transition .category_info_container .category_info {
    background-color: #aaa;
    padding: 0 20px;
}
a.transition .category_info_container .category_info .category_name {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 70px;
}
a.transition .category_info_container .category_info .category_desc {
    display: none;
}
a.transition:hover .category_info_container  {
    background: #eee;
    width: 48%;
    height: 100%;
}
a.transition:hover .category_info_container .category_info  {
    position: absolute;
    bottom: 20%;
    background: none;
}
a.transition:hover .category_info_container .category_info .category_name {
    color: #000;
    line-height: 50px;
}
    a.transition:hover .category_info_container .category_info .category_desc {
    display: block;
}

我的标记：

<a href="#" class="transition">
<div class="category_info_container">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</div>
</a>

我创建了一个JSFiddle with my code。

Answer 1

我认为，如果你对元素使用不同的块会更好：

结帐我的例子：
http://jsfiddle.net/bo5o3q18/3/

<a href="#" class="transition">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
    </div>

    <div class="category_info-add">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</a>

CSS过渡 - 只在一个方向上工作，需要两者兼而有之

1 个答案: