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

Question

设计:我创建了一个根据悬停状态改变背景的 div，段落 float 在略高于其父项的范围内，因此当声明“之前”和“之后”时，它看起来干净无缝。

问题:我试图让我想要的 div 在悬停时增长和折叠。但是，当我尝试修改段落以在 div 内部调整大小时，没有任何反应。我尝试了几个实验，看看什么有效，但我无法获得预期的效果。 文本在展开时完美放置，但在未展开时拒绝更改或修改。 换句话说，我的问题不在于悬停，而在于文本。它只是不会让我调整它的大小或强制它在悬停时更改边距或填充大小。而且我认为前后标签可能与文本重叠，不管我给它们的 z-index 是多少。您可以看到问题和所需影响的图像示例，以及下面的 jsfiddle。 (代码下)

代码:

    .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;
}

此处为图片示例: http://1drv.ms/1sVJKkp

Jsfiddle 在这里: http://jsfiddle.net/eradrom/6YNjw/

详细信息:好的，我一直在为 deviantart.com 做一个期刊皮肤元素(这是一个只允许在编码中更改 CSS 并且允许的命令和代码非常有限的网站)，我在路。除了我描述的小问题外，我设法让它的大部分工作。我对此束手无策。希望无需创建另一个 div 即可给出解决方案。

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

Answer 1

您可以将 .con-1 p 的边距更改为与 .con-1 相同的负边距，然后使用选择器 .con-1:hover 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;
}

更新

我在这里 fork 你的 jsfiddle http://jsfiddle.net/HX4hH/变化如下您的图片没有显示，所以我改用了彩色 block 。

.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;
}