Question

我有以下codepen，这是一个带有数字和标记文字的基本定位标签：

<span href="#" class="part-marker">
  <a href="#" class="marker-label">1<span>&nbsp;marker text</span></a>
</span>

如何使用css3过渡让它在悬停时滑出？我试过用这个没有成功吗？

Answer 1

请参阅下面的简化版本 - 这里的关键是您无法对不会缩放的属性进行转换，因此您可以从display:none t inline-block获取元素从隐藏到显示，因为没有中间点。您可以执行的操作是使用max-width和overflow的组合，如下所述。

Demo Fiddle

HTML

<div> <a href='#'>1</a>
 <span>Label</span>
</div>

CSS

a {
    display:inline-block;
    background:blue;
    color:white;
    padding:0 5px;
}
div {
    position:relative;
}
div span {
    position:absolute;
    display:inline-block;
    max-width:0;
    overflow:hidden;
    transition:all 1s ease-in;
}
a:hover+span {
    max-width:100%;
}

Answer 2

您也可以使用否定text-indent：http://codepen.io/anon/pen/xalDc/

span { 
    text-indent:-150px;
    overflow:hidden;
    display:inline-block;/* triggers layout */
    transition: all 1s ease-in-out;
    /* position:absolute ; not needed since a is already so */
    }
    &:hover {
        span {
            text-indent:0;
        }
    }

Answer 3

看看这段代码：

<强> HTML

<a href="#" class="marker-label" text="marker text">
    1
</a>

<强> CSS

.marker-label {
    display:block;
    background:blue;
    color:white;
    padding:4px 8px;
    font-size:1em;
    line-height:1;
    position:relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    width:10px;
}
.marker-label:hover {
    width:80px;
}
.marker-label:after {
    content:attr(text);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    position:absolute;
    left:-100px;
}
.marker-label:hover:after {
    left:20px;
}

这是 FIDDLE

使用css3过渡滑出标签

3 个答案:

Demo Fiddle