Question

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

在悬停兄弟div时，第一个内部p元素将设置为消失，而第二个较小的元素则会显示。然而，外部div一直缩小到最小宽度而不是内部段落。

以下JSFiddle总结了一切。将鼠标悬停在蓝色框上以查看正在进行的操作：http://jsfiddle.net/cq18567u/

是否只有CSS解决方案？

Answer 1

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

Answer 2

我尝试更改你的代码，但我无法实现切换两段之间转换的效果。我从您的演示中删除了一些复杂的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时，意味着外部元素不再包含＆＃39;它，因此它不会自然地将自己包裹在内部元素周围。我尝试将#textprev的CSS（第二个 - 你为什么有两个？）切换到position: absolute然后移动它。 e.g。

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

然后像Kyojimaru所提到的动画问题就是你需要在普通max-width元素及其#textup伪元素上设置hover

这是另一个JSFiddle

Answer 4

您的代码无法正常工作的主要原因是您使用position: absolute #textprev使其退出当前元素流，因此您需要移除position: absolute 1}}。这会使width变为正确的，但它看起来不存在，因为默认情况下<p>是block element，所以它是{{1} }将在新行中，但由于您为#textprev设置了height，并使用#text1，因此无法看到它。

您需要做些什么才能改变overflow: hidden的{{1}}，并使用您当前的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状态下为max-width设置#textup，以便normal可以正常工作（它不会工作如果您仅在一个州宣布hover），则在transition和max-width状态下使用normal进行不同的转换，以便hover不变以一种奇怪的方式。（从delay和width状态的transition和#textup移除#textprev，然后在normal中添加hover以查看内容我的意思是改变transition: all ease-in-out .5s;）

的奇怪方式

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

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

4 个答案: