2

我在另一个跨度内有一个隐藏的跨度。当我将鼠标悬停在外部跨度上时，我想为隐藏的跨度设置动画以滑出并显示。

<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很烂，我想我忘了保存它什么的，反正旧链接没有显示我想要的效果。新更新的链接确实显示了效果。

4

1 回答 1

1

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

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

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

于 2012-09-28T15:53:33.353 回答