Question

我在另一个范围内有一个隐藏的跨度。当我将鼠标移到外跨区时，我想为隐藏的那个设置动画以滑出并显示。

<span class="outer">Things: <span class="number">5 <span class="details">[3 widgets, 2 spanners]</span></span></span>

的CSS：

.outer {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 7px;
    margin: 1em;
    font-family: Verdana;
}

.number {
    background-color: green;
    color: white;
    padding: 3px 7px;
    border-radius: 4px;
}

.details {
    display: none;       
}

.outer:hover .details {
    display: inline;  
}

以下是我在没有动画的情况下工作的示例：http://jsfiddle.net/QSQBV/13/

我希望隐藏的跨度从0变为宽度'自动'或淡入。

- 编辑 -

好吧，我吮吸jsFiddle，我想我忘了保存它或者什么东西，无论如何，旧的链接没有显示我追求的效果。新的更新链接确实显示了效果。

Answer 1

您需要提供background-color不透明度才能正常工作。

这是你需要的吗？ JSFiddle链接：http://jsfiddle.net/QSQBV/73/

编辑：根据您的要求更新了JSFiddle。希望这是你需要的！我使用div代替span但

CSS动画。从[显示无; width：0]到[显示内联;宽度：自动]

1 个答案: