外部 div 宽度与内部段落宽度不匹配

Question

我正在尝试根据其内部 <p> 元素宽度来扩展或缩小 div。外部div 包含其中两个，其宽度由 max-width 属性设置，因此我可以在它重新调整其宽度时进行 CSS 过渡。

悬停同级 div 时，第一个内部 p 元素设置为消失，而第二个较小的元素出现。然而，外部 div 一直缩小到它的最小宽度，而不是内部段落的宽度。

下面的 JSFiddle 总结了这一切。将鼠标悬停在蓝色框上，看看发生了什么：http://jsfiddle.net/cq18567u/

是否有唯一的 CSS 解决方案？

Answer 1

在没有inline-block的情况下也可以通过改变悬停时第一段的高度来实现，这也产生了一种奇特的效果：jsfiddle DEMO

Answer 2

我尝试更改您的代码，但我无法实现切换两个段落之间的转换效果。 我从你的demo中去掉了一些复杂的css代码，只是实现了一个基本的需求，没有过渡。

这是我的代码分支：http://jsfiddle.net/abruzzi/cq18567u/7/ 主要改动如下：

#prev:hover~#text1 #textup{
    max-width: 0;
    display: none; }
#prev:hover~#text1 #textprev{
    display: block; }

Answer 3

问题是您有一个块元素（p 标记），position: absolute 在另一个块元素（div）内。当内部元素具有position: absolute 时，意味着外部元素不再“包含”它，因此它不会自然地将自身包裹在内部元素周围。我会尝试将 #textprev 的 CSS（第二个 - 为什么你有两个？）切换到 position: absolute 然后移动它。例如

#textprev {
    postion: relative;
    top: -50px; /* to compensate for the height of your '#prev' div */
}

然后，正如 Kyojimaru 所提到的，动画问题就是您需要在普通的 #textup 元素及其 hover 伪元素上设置一个 max-width。

这是另一个JSFiddle

Answer 4

您的代码不起作用的主要原因是因为您将position: absolute 用于#textprev，这使其退出当前元素流，因此您需要删除position: absolute。这将使width 成为正确的，但看起来它不存在，因为默认情况下<p> 是block element，所以#textprev 将在新行中，但是因为您设置height为#text1，用overflow: hidden，看不到。

要让它工作，您需要将style 更改为您的paragraph，用您当前的HTML

<div id="prev"></div>
<div id="text1">
    <p id="textup" class="side">Before hovering (1st paragraph)</p>
    <p id="textprev" class="side">After (2nd paragraph)</p>
</div>

并将CSS修改为

#prev {
    position: relative;
    float: right;
    background: blue;
    width:50px;
    height:50px;
}
#prev:hover ~#text1 #textup {
    max-width: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out .5s;
}
#prev:hover ~#text1 #textprev {
    max-width: 200px;
    opacity: 1;
    visibility: visible;
    transition: all .5s ease-in-out .5s;
}
#text1 {
    position: relative;
    float: right;
    height: 50px;
    max-width: 500px;
    background: grey;
    overflow: hidden;
}
#textup {
    visibility: visible;
    background: red;
    opacity:1;
    max-width:500px;
    transition: all .5s ease-in-out .5s;
}
#textprev {
    visibility: hidden;
    max-width:0px;
    background: green;
    opacity:0;
    transition: all ease-in-out .5s;
}
.side {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
    color: white;
    display:inline-block;
}

您将paragraph 与.side 类更改为inline-block 元素，如果有空格，这将使其出现在同一行中。然后，您还需要在normal 和hover 状态下为#textup 设置max-width，这样transition 就可以工作（如果您仅在一种状态下声明max-width，它将无法工作） ，然后使用delay 对normal 和hover 状态进行不同的转换，因此width 不会以奇怪的方式发生变化。 （在normal 和hover 状态下从#textup 和#textprev 中删除transition，然后在.side 中添加transition: all ease-in-out .5s;，看看我所说的改变width 的奇怪方式是什么意思）

这是一个Updated Fiddle，看看它是如何工作的。