Html 仅使用css在悬停时更改段落

设计： 我创建了一个div，它的背景随着悬停状态的变化而变化，段落的浮动范围略高于其父段，这样当声明“before”和“after”时，它看起来干净而无缝

问题： 我试图让我想要的div在盘旋时增长和崩溃。然而，当我试图修改段落以使用div调整内部大小时，什么也没有发生。我尝试了几次实验来看看什么是有效的，但都没有达到预期的效果文本在展开时可以完美放置，但在未展开时拒绝更改或修改。换句话说，我的问题不在于悬停，而在于文本。它只是不允许我调整它的大小，或者在悬停时强制它更改边距或填充大小。我认为前后标记可能与文本重叠，不管我给它们的z索引是什么。您可以看到问题和所需影响的图像示例，以及下面的JSFIDLE。（根据守则）

代码：

    .con-1
{
    background:url(con-2.png) no-repeat;
    display:compact;
    margin-top:15px;
    margin-left:50px;
    position:relative;
    width:928px;
    height:140px;
    margin-bottom:10px;
    overflow:hidden;

}



.con-1::before
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:159px;
    background:url(con-1-top-4.png) no-repeat center center;
    left:4px;
    top:-159px;

}

.con-1::after
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:65px;
    top:65px;
    background:url(con-1-bot-4.png) no-repeat;
    margin-bottom:50px;

}

 .con-1:hover
{
    height:100%;
    overflow:visible;
    background:url(con-1-mid-4.png) repeat-y;
    margin-top:170px;
    margin-bottom:100px;
}

 .con-1 p{
    margin-top:-290px;
    position:float;
    padding-left:120px;
    padding-right:250px;
    margin-bottom:-100px;
    z-index:200;
    overflow:visible;
}

这里的图片示例：

Jsfiddle这里：

详细信息： 好的，我已经为deviantart.com做了一段时间的journal skin项目（这是一个只允许对编码进行CSS更改的网站，允许的命令和代码非常有限），我在路上遇到了几次颠簸。除了我描述的小问题外，我设法使它大部分工作正常。我对此束手无策。希望可以在不创建另一个div的情况下给出一个解决方案

---

重要提示：该网站不允许使用if表单或输入标签甚至标签，因此这也不起作用。我已经尝试并检查过了。

删除

溢出：可见.con-1 p

上的code>。当内容的包含div未展开时，应隐藏该内容。带

溢出：可见，即使div已“最小化”，也会显示溢出

您还应该知道
位置：float不是有效的HTML。如果希望某个对象浮动，则属性本身是
float
。您可以将其设置为
float:left。
位置的有效类型包括
相对的
，
固定的
，
绝对的
，和
静态的
（这是默认值）。
您是否尝试过像本例中那样使用css转换


我希望这有帮助
 您可以将.con-1 p的边距更改为与.con-1相同的负边距，然后使用选择器.con-1:悬停p来更改p元素的边距

CSS

.con-1:hover p {
    margin-top:-290px;
}

 .con-1 p {
    margin-top:-159px;
    position:float;
    padding-left:120px;
    padding-right:250px;
    margin-bottom:-100px;
    z-index:200;
    overflow:visible;
}

更新

我已经在这里分叉了你的JSFIDLE，更改如下
您的图像没有显示，所以我使用了彩色块

.con-1
{
    background:green;
    display:compact;
    margin-top:15px;
    margin-left:50px;
    position:relative;
    width:928px;
    height:140px;
    margin-bottom:10px;
    overflow:hidden;

}

.con-1:before
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:159px;
    background:red;
    left:4px;
    top:-159px;

}

.con-1:after
{
    content:"";
    position:relative;
    display:block;
    width:928px;
    height:65px;
    top:0px;
    background:yellow;
}

 .con-1:hover
{
    height:auto;
    overflow:visible;
    background:blue;
    margin-top:170px;
    margin-bottom:100px;
}
.con-1:hover p {
    margin-top:-290px;
    overflow: visible;
    height: auto;
    display: inline-block;
}

请分享你的HTML的一个例子，也许还有你目前做悬停的方式。一把小提琴也不错：好的，这是JSFIDLE：如果我做错了什么，请告诉我，因为这是我第一次使用这个网站。不管怎么说，正如上面所显示的，悬停在上面是好的，它将内容放在手边，而这并不意味着什么t@user3789512这有帮助吗？好的，我会尝试一下，但它真的不想在扩展时给我想要的效果或行为，除非我使用position:float。我知道它是无效的，但出于某些愚蠢的原因，它不会以任何其他方式工作。感谢您注意到.con-1p上的输入错误和溢出。我马上就把原稿修改好！还没有，因为我想先解决这个问题，然后再添加过渡动画。谢谢你的建议！我会再试一次，但我不知道是否有效。我认为前后标记与p重叠，而与我给出的z索引无关。使悬停从一开始就作用于p中的文本无效。我设法让它工作了一次，但只是在添加了太多的文本之后，前后都没有重叠div p的中间，让我把鼠标放在它的中间。说真的，我真是不知所措。我已经把你的jsfiddle放在这里了：请看上面的更改，谢谢你！我尝试了我最初附加的图片，通过一些我自己的调整，我终于让它工作了！再次感谢！如果你想看的话，我稍后会上传工作版本。