Question

html：

<div id='test'><span></span></div>

CSS：

#test:hover span:before{content:'I want this to make the div expand in ease'}
#test, #test span:before, #test span{-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in}

我想知道这是否只能实现我的CSS：当鼠标悬停#test时，应将某些文字添加到span中，并且外部div应该可以轻松扩展。上面的HTML + CSS不起作用，DIV会立即扩展。

Answer 1

转换不起作用的原因是因为在这种情况下无法转换。

计算值不适用于CSS转换，因为转换需要初始和目标国家。像

这样的东西

#test span:before { 
   content: ''; 
   max-height: 0; 
   max-width: 0; 
   overflow: hidden;
   display: inline-block; }
#test:hover span:before { 
   content: 'I want this to make the div expand in ease';
   max-height: 500px;
   max-width: 500px;
   transition: all 0.2s ease-in;
}

将起作用，因为最大高度同时提供初始值和目标值。这就是在这种情况下变得动画的内容，而不是简单添加内容，因为CSS不知道元素中存在什么内容 - 尽管你可能会想到看到用于伪元素的内容属性。

Answer 2

以下是一种方法：http://jsfiddle.net/m49tdabh/。注意：我建议在span标记之间添加内容，而不是使用伪元素。

HTML：

<div id='test'>
    <span></span>
</div>

CSS：

#test {
    outline: 1px dotted gray;
}

#test span {
    display: table;
}

#test span:before {
    content: "Hidden message displayed on hover";
    display: inline-block;
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: width 0.3s linear;
}

#test:hover span:before {
    width: 100%;
    border-color: red;
}

如何使过渡风格适用于：内容之前

2 个答案: